fix(upload): preserve file ids and upload state

This commit is contained in:
caoqianming 2026-08-03 11:19:07 +08:00
parent 7da285b6f9
commit 44a3ea1028
2 changed files with 30 additions and 46 deletions

View File

@ -10,22 +10,19 @@
append-to-body
destroy-on-close
>
<el-upload
v-model:file-list="fileList"
<sc-upload-filed
v-model="fileIds"
:file_="sourceFiles"
:disabled="disabled"
:http-request="uploadRequest"
:before-upload="beforeUpload"
:on-preview="preview"
multiple
:multiple="true"
tip="支持文件、图片和视频,可一次选择多个文件"
@uploading-change="uploading = $event"
>
<el-button v-if="!disabled" type="primary">上传文件</el-button>
<template #tip>
<div class="el-upload__tip">支持文件图片和视频可一次选择多个文件</div>
</template>
</el-upload>
</sc-upload-filed>
<template #footer>
<el-button @click="visible = false">关闭</el-button>
<el-button v-if="!disabled" type="primary" :loading="saving" @click="save">保存</el-button>
<el-button v-if="!disabled" type="primary" :loading="saving" :disabled="uploading" @click="save">保存</el-button>
</template>
</el-dialog>
</span>
@ -42,7 +39,9 @@ export default {
return {
visible: false,
saving: false,
fileList: [],
uploading: false,
fileIds: [],
sourceFiles: [],
};
},
computed: {
@ -52,46 +51,19 @@ export default {
},
methods: {
open() {
this.fileList = (this.row.files_ || []).map((file) => ({
id: file.id,
name: file.name,
url: file.path,
status: "success",
}));
this.sourceFiles = [...(this.row.files_ || [])];
this.fileIds = this.sourceFiles.map((file) => file.id);
this.uploading = false;
this.visible = true;
},
beforeUpload(file) {
if (file.size <= 0) {
this.$message.warning("不能上传空文件");
return false;
}
return true;
},
uploadRequest(param) {
const data = new FormData();
data.append("file", param.file);
this.$API.common.upload.post(data, {
onUploadProgress: (event) => {
if (event.total) {
param.onProgress({ percent: Math.round((event.loaded / event.total) * 100) });
}
},
}).then(param.onSuccess).catch(param.onError);
},
preview(file) {
const url = file.url || file.response?.path;
if (url) window.open(url, "_blank");
},
async save() {
const uploading = this.fileList.some((file) => ["ready", "uploading"].includes(file.status));
if (uploading) {
if (this.uploading) {
this.$message.warning("请等待文件上传完成");
return;
}
const ids = this.fileList.map((file) => file.id || file.response?.id).filter(Boolean);
this.saving = true;
try {
const result = await this.$API.wpm.mlogbw.files.req(this.row.id, { files: ids });
const result = await this.$API.wpm.mlogbw.files.req(this.row.id, { files: this.fileIds });
this.row.files = result.files;
this.row.files_ = result.files_;
this.visible = false;

View File

@ -52,7 +52,8 @@
},
data() {
return {
defaultFileList: []
defaultFileList: [],
uploadingCount: 0,
}
},
watch:{
@ -100,14 +101,20 @@
arr.forEach(item => {
if(item){
_arr.push({
id: item.id,
name: item.name,
url: item.path
url: item.path || item.url,
status: "success",
})
}
})
return _arr
},
before(file){
if (file.size <= 0) {
this.$message.warning("不能上传空文件");
return false;
}
const maxSize = file.size / 1024 / 1024 < this.maxSize;
if (!maxSize) {
this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
@ -154,6 +161,8 @@
for (const key in param.data) {
data.append(key, param.data[key]);
}
this.uploadingCount += 1
this.$emit('uploading-change', true)
apiObj.post(data, {
onUploadProgress: e => {
const complete = parseInt(((e.loaded / e.total) * 100) | 0, 10)
@ -164,6 +173,9 @@
param.onSuccess(res)
}).catch(err => {
param.onError(err)
}).finally(() => {
this.uploadingCount = Math.max(0, this.uploadingCount - 1)
this.$emit('uploading-change', this.uploadingCount > 0)
})
}
}