84 lines
2.3 KiB
Vue
84 lines
2.3 KiB
Vue
<template>
|
|
<view class="wh-full">
|
|
<u-upload
|
|
:fileList="data.fileList"
|
|
@afterRead="afterRead"
|
|
@delete="deletePic"
|
|
v-bind="attrs"
|
|
:deletable="!attrs.disabled"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
//https://uiadmin.net/uview-plus/components/upload.html'
|
|
|
|
import {hideLoading, showLoading} from "@/utils/uniapp";
|
|
import {attachmentUpload} from "@/api/system/upload";
|
|
import {imagUrl} from "@/utils";
|
|
|
|
const attrs: any = useAttrs()
|
|
const data: any = reactive({
|
|
fileList: []
|
|
})
|
|
let urlList: string[] = []
|
|
let isUpdate = false
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
function deletePic(event: any) {
|
|
if (!attrs.disabled) {
|
|
isUpdate = true
|
|
data.fileList.splice(event.index, 1)
|
|
urlList.splice(event.index, 1)
|
|
emit('update:modelValue', urlList.join(','))
|
|
}
|
|
}
|
|
|
|
const props = defineProps(['modelValue'])
|
|
|
|
watchEffect(() => {
|
|
if (props.modelValue) {
|
|
if (!isUpdate) {
|
|
let urlListModel = props.modelValue.split(',')
|
|
for (let key in urlListModel) {
|
|
if (urlListModel[key] && urlListModel[key] != 'undefined') {
|
|
data.fileList.push({
|
|
url: imagUrl(urlListModel[key]),
|
|
})
|
|
urlList.push(urlListModel[key])
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
async function afterRead(event: any) {
|
|
isUpdate = true
|
|
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
|
|
let lists: any = [].concat(event.file)
|
|
let fileListLen = data.fileList.length
|
|
lists.map((item: any) => {
|
|
data.fileList.push({
|
|
...item,
|
|
status: 'uploading',
|
|
message: '上传中'
|
|
})
|
|
})
|
|
|
|
for (let i = 0; i < lists.length; i++) {
|
|
showLoading({title: '上传中'})
|
|
const {result} = await attachmentUpload(lists[i].url)
|
|
hideLoading()
|
|
let item = data.fileList[fileListLen]
|
|
data.fileList.splice(fileListLen, 1, Object.assign(item, {
|
|
status: 'success',
|
|
message: '',
|
|
url: imagUrl(result[0].filePath)
|
|
}))
|
|
urlList.push(result[0].filePath)
|
|
fileListLen++
|
|
}
|
|
emit('update:modelValue', urlList.join(','))
|
|
}
|
|
</script> |