dialog中write组件代码
let ImageList = reactive<UploadFile[]>([])
const formSchema = reactive<FormSchema[]>([
{
field: 'ImageFiles',
label: '现场图片',
component: 'Upload',
colProps: { span: 24 },
componentProps: {
limit: 5,
action: PATH_URL + `/upload`,
headers: {
[userStore.getTokenKey]: userStore.getToken
},
autoUpload: true,
// fileList: ImageList,
multiple: true,
listType: 'picture-card',
beforeUpload: (file: File) => {
const isImage = /^image\//.test(file.type)
const isLt10M = file.size / 1024 / 1024 < 10
if (!isImage) {
ElMessage.error('只能上传图片文件!')
return false
}
if (!isLt10M) {
ElMessage.error('图片大小不能超过 10MB!')
return false
}
return true
},
onSuccess: (response: UploadResponse, uploadFile: UploadFile) => {
if (response.code === 200) {
// 更新文件信息
Object.assign(uploadFile, {
url: MINO_SERVER + response.data.path,
path: response.data.path,
id: response.data.id,
name: response.data.fullname
})
ImageList.push(uploadFile)
handleImageUpdate(ImageList)
} else {
uploadFile.status = 'error'
}
},
onError: (_: Error, uploadFile: UploadFile) => {
uploadFile.status = 'error'
},
onPreview: (uploadFile: UploadFile) => {
if (uploadFile.url) {
window.open(uploadFile.url)
}
},
beforeRemove: async (uploadFile: UploadFile) => {
const newList = ImageList.filter((item) => item.id !== uploadFile.id)
ImageList = newList
handleImageUpdate(ImageList)
},
onExceed: () => {
ElMessage.warning('最多只能上传5张图片')
},
slots: {
default: () => (
<div>
<ElIcon class="avatar-uploader-icon" size="26" style="color:#165DFF">
+
</ElIcon>
</div>
),
tip: () => (
<div class="el-upload__tip" style="width:420px;color:#606266">
支持jpg、png格式,单个文件不超过10M,最多上传5张
</div>
)
}
}
},
])
const handleImageUpdate = (imageList) => {
setValues({ ImageFiles: imageList })
setSchema([
{
field: 'ImageFiles',
path: 'componentProps.fileList',
value: imageList
}
])
}
//回显时处理数据
watch(
() => props.currentRow,
(currentRow) => {
if (!currentRow) return
// console.log(currentRow)
setValues(currentRow)
if (currentRow.ImageFiles && currentRow.ImageFiles.length) {
currentRow.ImageFiles?.forEach((item) => {
item.name = item.fullname
item.url = MINO_SERVER + item.path
})
Object.assign(ImageList, currentRow.ImageFiles)
handleImageUpdate(ImageList)
} else {
ImageList.splice(0, ImageList.length)
handleImageUpdate(ImageList)
}
},
{
deep: true,
immediate: true
}
)
index页面记得处理提交的数据