fix(upload): preserve file ids and upload state
This commit is contained in:
parent
7da285b6f9
commit
44a3ea1028
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue