|
@@ -21,14 +21,15 @@
|
|
|
<el-divider />
|
|
|
<div class="upload-tip">{{ uploadTip }}</div>
|
|
|
<ul slot="file-list" class="file-list">
|
|
|
- <li v-for="(file, i) in file_info_list" :key="i">
|
|
|
+ <li v-for="(file, i) in file_list" :key="i">
|
|
|
<div class="file-name">
|
|
|
<span>
|
|
|
<SvgIcon :icon-class="iconClass" size="12" />
|
|
|
<span>{{ file.file_name ?? file.name }}</span>
|
|
|
<!-- <span>({{ file.size }})</span> -->
|
|
|
</span>
|
|
|
- <span v-show="file.progress > 0"> {{ file.progress }}% </span>
|
|
|
+ <span v-show="file.progress > 0 && file.progress < 100"> {{ file.progress }}% </span>
|
|
|
+ <span v-show="file.file_id"> 完成 </span>
|
|
|
</div>
|
|
|
<SvgIcon icon-class="delete-black" size="12" @click="removeFile(file, i)" />
|
|
|
<SvgIcon v-show="moduleData.type == 'picture'" icon-class="mark" size="12" @click="viewDialog(file)" />
|
|
@@ -79,7 +80,8 @@ export default {
|
|
|
return {
|
|
|
curFile: null,
|
|
|
conversionSize,
|
|
|
- file_info_list: [],
|
|
|
+ file_id_list: [],
|
|
|
+ file_list: [],
|
|
|
visible: false,
|
|
|
};
|
|
|
},
|
|
@@ -89,13 +91,13 @@ export default {
|
|
|
// 显示自定义样式文件列表
|
|
|
onFileChange(file, fileList) {
|
|
|
this.afterSelectFile(file);
|
|
|
-
|
|
|
+ console.log(123);
|
|
|
fileList.forEach((file) => {
|
|
|
if (!file.progress || file.progress <= 0) file.progress = 0;
|
|
|
if (!file.title) file.title = '';
|
|
|
if (!file.describe) file.describe = '';
|
|
|
});
|
|
|
- this.file_info_list = fileList;
|
|
|
+ this.file_list = fileList;
|
|
|
},
|
|
|
|
|
|
// 删除文件
|
|
@@ -107,7 +109,10 @@ export default {
|
|
|
})
|
|
|
.then(() => {
|
|
|
this.$refs.upload.handleRemove(file);
|
|
|
- // this.file_info_list.splice(i, 1);
|
|
|
+ if (this.file_list[i].file_id) {
|
|
|
+ this.file_list.splice(i, 1);
|
|
|
+ this.file_id_list.splice(i, 1);
|
|
|
+ }
|
|
|
})
|
|
|
.catch(() => {});
|
|
|
},
|
|
@@ -115,6 +120,7 @@ export default {
|
|
|
// 文件校验
|
|
|
afterSelectFile(file) {
|
|
|
const fileName = file.name;
|
|
|
+ console.log(this.moduleData.single_size);
|
|
|
let singleSizeTip = `文件[${fileName}]大小超过 ${conversionSize(this.moduleData.single_size)},被移除!`;
|
|
|
|
|
|
if (file.size > this.moduleData.single_size * 1024 * 1024) {
|
|
@@ -145,27 +151,34 @@ export default {
|
|
|
|
|
|
// 上传文件
|
|
|
uploadFiles() {
|
|
|
- const files = this.$refs.upload.uploadFiles || [];
|
|
|
+ const files = (this.file_list || []).filter((file) => file.uid);
|
|
|
+ if (files.length <= 0) {
|
|
|
+ this.$message.error('没有需要上传的文件!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
const totalSize = files.reduce((sum, cur) => sum + Number(cur.size || 0), 0);
|
|
|
if (totalSize > this.moduleData.total_size * 1024 * 1024) {
|
|
|
this.$message.error(`文件总大小不能超过${conversionSize(this.moduleData.total_size)}`);
|
|
|
return false;
|
|
|
}
|
|
|
+
|
|
|
files.forEach((file) => {
|
|
|
let form = new FormData();
|
|
|
form.append(file.name, file.raw, file.name);
|
|
|
fileUpload('Mid', form, {
|
|
|
handleUploadProgress: (progressEvent) => {
|
|
|
- let en = this.file_info_list.find((p) => p.uid === file.uid);
|
|
|
let per = Number((progressEvent.progress * 100).toFixed(2) || 0);
|
|
|
+ let en = this.file_list.find((p) => p.uid === file.uid);
|
|
|
if (en) {
|
|
|
en.progress = per;
|
|
|
this.$forceUpdate();
|
|
|
}
|
|
|
},
|
|
|
}).then(({ file_info_list }) => {
|
|
|
- if (file_info_list.length > 0) {
|
|
|
- this.file_info_list = file_info_list;
|
|
|
+ let file_index = this.file_list.findIndex((p) => p.uid === file.uid);
|
|
|
+ if (file_index > -1) {
|
|
|
+ this.file_list[file_index] = file_info_list[0];
|
|
|
+ this.file_id_list.push(file_info_list[0].file_id);
|
|
|
}
|
|
|
});
|
|
|
});
|
|
@@ -175,12 +188,11 @@ export default {
|
|
|
viewDialog(file) {
|
|
|
this.visible = true;
|
|
|
this.curFile = file;
|
|
|
- console.info(file);
|
|
|
},
|
|
|
|
|
|
// 给文件加介绍
|
|
|
fillDescribeToFile(file) {
|
|
|
- let en = this.file_info_list.find((p) => p.uid === file.uid);
|
|
|
+ let en = this.file_list.find((p) => p.uid === file.uid);
|
|
|
if (en) {
|
|
|
Object.assign(en, file);
|
|
|
}
|
|
@@ -258,7 +270,6 @@ export default {
|
|
|
column-gap: 14px;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- width: 360px;
|
|
|
max-width: 360px;
|
|
|
padding: 8px 12px;
|
|
|
font-size: 14px;
|
|
@@ -271,6 +282,10 @@ export default {
|
|
|
align-items: center;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .svg-icon {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|