MTP20_WEB_GLOBAL/src/packages/mobile/components/base/uploader/index.vue

<!-- 待优化 -->
<template>
    <div class="app-uploader">
        <span class="app-uploader__button" @click="onClickUpload" v-if="!hasPermission"></span>
        <Uploader ref="uploaderRef" v-model="fileList" :max-count="maxCount" :max-size="5 * 1024 * 1024"
            @oversize="onOversize" :after-read="onAfterRead" @delete="onDelete" reupload />
        <Notify v-model:show="showNotify" :duration="0" :title="$t('common.tips30')" :content="$t('common.tips31')" />
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { showFailToast, Uploader, UploaderFileListItem } from 'vant'
import { useGlobalStore, i18n } from '@/stores'
import plus from '@/utils/h5plus'
import service from '@/services'
import axios from 'axios'
import Notify from '@mobile/components/base/notify/index.vue'

defineProps({
    maxCount: {
        type: Number,
        default: 1
    }
})

const { global: { t } } = i18n

const emit = defineEmits(['success', 'delete'])
const globalStore = useGlobalStore()
const uploaderRef = ref()
const showNotify = ref(false)
const fileList = ref<UploaderFileListItem[]>([])

const storagePermission = globalStore.getAndroidPermissions('READ_EXTERNAL_STORAGE')
const hasPermission = ref(storagePermission === 1) // 是否已授权存储权限

const onOversize = () => {
    showFailToast(t('common.tips29'))
}

const onClickUpload = () => {
    const status = globalStore.getAndroidPermissions('READ_EXTERNAL_STORAGE')
    switch (status) {
        case 0: {
            showNotify.value = true
            plus.requestPermissionReadExternalStorage({
                onSuccess: () => {
                    showNotify.value = false
                    globalStore.setAndroidPermissions('READ_EXTERNAL_STORAGE', 1)
                },
                onError: () => {
                    showNotify.value = false
                    globalStore.setAndroidPermissions('READ_EXTERNAL_STORAGE', -1)
                }
            })
            break
        }
        case 1: {
            hasPermission.value = true
            uploaderRef.value.chooseFile()
            break
        }
        default: {
            showFailToast(t('common.tips25'))
        }
    }
}

// eslint-disable-next-line
const onAfterRead = (file: any) => {
    const data = new FormData()
    data.append('file', file.file)

    file.status = 'uploading'
    file.message = t('common.tips28')

    axios.post(service.getServiceConfig('uploadUrl'), data).then(res => {
        if (res.status == 200) {
            file.status = 'success'
            file.message = t('common.tips26')
            file.url = res.data[0]?.filePath

            const files = fileList.value.map((e) => e.url)
            emit('success', files.join(';'))
        } else {
            file.status = 'failed'
            file.message = t('common.tips27')
        }
    })
}

const onDelete = (file: UploaderFileListItem, detail: { name: string; index: number; }) => {
    emit('delete', detail.index)
}
</script>

<style lang="less">
@import './index.less';
</style>