90 lines
2.7 KiB
Vue
90 lines
2.7 KiB
Vue
<template>
|
|
<sar-upload v-model="fileList" :root-class="rootClass" :after-read="afterRead" :multiple="multiple"
|
|
:max-count="99"
|
|
:root-style="`--sar-upload-select-bg:#f7f7f7;${customUpload ? '--sar-upload-select-width: max-content;--sar-upload-select-height: max-content;--sar-upload-select-color: transparent;--sar-upload-select-bg: transparent;--sar-upload-select-border-radius: 0;' : ''} ${hiddenPreview ? '--sar-upload-preview-width: 0;--sar-upload-preview-height: 0;' : ''}`">
|
|
<template #select>
|
|
<view class="flex flex-col items-center" v-if="!customUpload">
|
|
<view class="w-[60rpx] h-[60rpx]">
|
|
<image src="https://lwzk.ycymedu.com/img/cpgx/cp_shangchuan.png" mode="scaleToFill" />
|
|
</view>
|
|
<view class="text-[30rpx] text-[#333] mt-[10rpx]">上传图片</view>
|
|
</view>
|
|
<view v-else>
|
|
<slot :fileList="fileList"></slot>
|
|
</view>
|
|
</template>
|
|
</sar-upload>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { UploadFileItem } from 'sard-uniapp'
|
|
import { getEnvBaseUrl } from '@/utils';
|
|
|
|
const props = defineProps({
|
|
outerFileList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
customUpload: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
hiddenPreview: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
multiple: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
rootClass: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const emits = defineEmits(["change"])
|
|
|
|
const fileList = ref<UploadFileItem[]>([])
|
|
watch(() => props.outerFileList, (newV, oldV) => {
|
|
fileList.value = newV
|
|
}, { deep: true, immediate: true })
|
|
|
|
const uploadFileFn = (fileItem, index) => {
|
|
uni.uploadFile({
|
|
url: `${getEnvBaseUrl()}/api/sysFile/uploadFile`,
|
|
filePath: fileItem.file.path,
|
|
name: "file",
|
|
success: (uploadFileRes) => {
|
|
const resp = JSON.parse(uploadFileRes.data)
|
|
if (resp.code === 200) {
|
|
|
|
fileList.value[index].status = "done"
|
|
fileList.value[index].message = '上传完成'
|
|
fileList.value[index].url = resp.result.url
|
|
emits("change", fileList.value)
|
|
}
|
|
|
|
}
|
|
})
|
|
}
|
|
|
|
const afterRead = (fileItem: UploadFileItem) => {
|
|
fileItem.status = 'uploading'
|
|
fileItem.message = '正在上传'
|
|
fileList.value = [...fileList.value]
|
|
|
|
|
|
if (Array.isArray(fileItem)) {
|
|
fileItem.forEach((item, index) => {
|
|
uploadFileFn(item, index)
|
|
})
|
|
} else {
|
|
const index = fileList.value.findIndex(item => item.name === fileItem.name)
|
|
uploadFileFn(fileItem, index)
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|