<el-form-item label="截图" prop="imgs">
<el-upload
v-model:file-list="editform.imgs"
action="#"
accept="image/*"
:auto-upload="false"
list-type="picture-card"
:multiple="true"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
>
<el-icon>
<Plus/>
</el-icon>
</el-upload>
<el-dialog v-model="dialogImageUrl">
<img class="dialogImg" :src="dialogImageUrl" alt="Preview Image"/>
</el-dialog>
</el-form-item>
const handlePictureCardPreview = (uploadFile) => {
dialogImageUrl.value = uploadFile.url!
}
const handleRemove = (uploadFile, uploadFiles) => {
console.log(uploadFile, uploadFiles)
}
const uploadCheckImgs = async (formData: FormData) => {
return await GameMgt.uploadCheckImgs(formData).then((res: any) => {
return res.data?.data || [];
})
};
const upload = async() => {
let hasUploadImgs = editform.imgs.filter((item: any) => !item?.raw);
let needUploadImgs = editform.imgs.filter((item: any) => item?.raw);
if (needUploadImgs?.length) {
const formData = new FormData();
needUploadImgs.forEach((item, index) => {
formData.append(`imgs[${index}]`, item.raw); //重点
})
needUploadImgs = await uploadCheckImgs(formData);
}
needUploadImgs = needUploadImgs.map(item => {
return {
url: item,
name: item
}
})
editform.imgs = hasUploadImgs.concat(needUploadImgs);
const imgs = editform.imgs.map(img => img.url);
let params = {}, api;
params = {
resource_id: editform.id,
check_status: editform.check_status,
imgs: JSON.stringify(imgs),
introduce: editform.introduce
}
api = GameMgt.updateGameInfo;
}
ElementPlus el-upload实现自定义接口多个文件上传
于 2024-08-02 16:50:02 首次发布