产品要求：
- 最多选择100个文件
- 每张图最大2M
- 需要给出每张图上传的结果：成功从列表中删除，失败提示网络错误，大于2m也需要提示
- 支持重试
遇到的问题：
- upload组件不支持多文件顺序上传，如果一次性上传100张图，压力有点大
不支持顺序上传的原因，在elementui的源码中，手动调用submit方法时，会过滤status为ready的file，然后开始上传过程，上传过程异步，就会同时上传所有ready状态文件。
submit() {
this.uploadFiles
.filter(file => file.status === 'ready')
.forEach(file => {
this.$refs['upload-inner'].upload(file.raw);
});
},既然知道了submit方法会过滤ready状态的文件，我们可以手工控制file的状态，然后自己反复调用submit方法。
先看一下完成图：
代码：
<template>
<div>
<el-dialog :title="isUploading ? '导入中' : '导入数据'" :visible.sync="dialogVisible" @close="clear" :center="true" :lock-scroll="true" custom-class="import-data-dlg" width="1300px">
<div class="tip" v-if="!isUploading">每张不超过2M，格式为jpg/png</div>
<div v-else class="upload-progress">
<el-progress :show-text="false" :stroke-width="14" :percentage="percentage" color="rgba(19,206,102,1)" ></el-progress><span class="tip">{{uploadingTotal - fileListCache.length}}/{{uploadingTotal}}</span>
</div>
<div class="images">
<el-upload
:class="{'has-files': hasSelectedFiles, 'upload-images': true}"
action=""
ref="uploader"
:auto-upload="false"
:on-change="handleChange"
:on-remove="handleRemove"
multiple
:limit="100"
accept=".png,.jpg,.jpeg"
:http-request="uploadImages"
list-type="picture-card">
<i class="el-icon-plus"></i>
</el-upload>
</div>
<div class="tip bottom" v-if="hasSelectedFiles">已选择<span>{{total}}</span>张图片</div>
<div slot="footer" class="dialog-footer pull-right" v-if="hasSelectedFiles">
<el-button @click="cancel">放弃</el-button>
<el-button type="primary" @click="ok">开始导入</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import _ from 'lodash';
import $ from 'jquery';
import {mapState} from 'vuex';
import {CommonSrv, Deferred} from 'datapp';
import {Constants} from 'utils';
export default {
name: 'ImportDataDlg',
components: {
},
computed: {
...mapState([
'loginUser'
]),
hasSelectedFiles () {
return this.fileListCache && this.fileListCache.length;
}
},
data: function () {
return {
isUploading: false,
fileListCache: [],
imageUrls: [],
total: 0,
uploadingTotal: 0,
percentage: 0,
uploadingIdx: 0,
dialogVisible: false,
deferred: ''
};
},
methods: {
show (data = {}) {
this.dialogVisible = true;
this.deferred = new Deferred();
return this.deferred;
},
handleChange (file, fileList) {
this.fileListCache = fileList;
},
handleRemove (file, fileList) {
this.total--;
this.handleChange(file, fileList);
},
uploadImages (param) {
console.log('uploading.... param...', param.file.name);
this.uploadingIdx++;
window.setTimeout((i) => {
if (i % 3 === 0) {
param.onSuccess();
this.uploadSuccess(param.file);
} else if (i % 3 === 1) {
this.uploadError(param.file);
} else {
this.uploadBigger(param.file);
}
this.upload();
}, 1500, this.uploadingIdx);
},
upload () {
let idx = _.findIndex(this.fileListCache, f => f.status === 'waiting');
console.log('idx....', idx);
if (idx !== -1) {
this.fileListCache[idx].status = 'ready';
this.$refs.uploader.submit();
} else {
this.isUploading = false;
console.error('need call api');
}
},
uploadSuccess (file) {
console.log('success....', file.status, file.name);
_.remove(this.fileListCache, f => f.name === file.name);
this.total--;
this.percentage = ((this.uploadingTotal - this.fileListCache.length) / this.uploadingTotal) * 100;
},
uploadError (file) {
console.log('error....', file.status, file.name);
this.$refs.uploader.getFile(file).status = 'error';
},
uploadBigger (file) {
console.log('bigger....', file.status, file.name);
this.$refs.uploader.getFile(file).status = 'bigger';
},
ok () {
if (this.fileListCache.length) {
let waitingFiles = this.fileListCache.filter(f => f.status !== 'bigger');
if (waitingFiles.length) {
waitingFiles.forEach(f => { f.status = 'waiting'; });
this.uploadingTotal = this.fileListCache.length;
this.percentage = 0;
this.isUploading = true;
}
this.upload();
}
// this.dialogVisible = false;
},
cancel () {
this.dialogVisible = false;
},
clear () {
this.isUploading = false;
this.total = 0;
this.fileListCache.length = 0;
this.imageUrls = [];
}
},
mounted () {
$('.import-data-dlg').on('change', '.el-upload__input', (evt) => {
this.total += evt.target.files.length;
});
}
};
</script>
<style lang="scss">
.import-data-dlg {
height: 720px;
.el-dialog__body {
padding-top: 0;
padding-bottom: 0;
.tip {
font-size: 13px;
color: #99a9bf;
text-align: center;
span {
color: #000;
}
&.bottom {
margin-top: 20px;
text-align: left;
}
}
.upload-progress {
text-align: center;
.el-progress {
width: 180px;
display: inline-block;
margin: auto;
}
.el-progress-bar__outer {
border-radius: 0;
.el-progress-bar__inner {
border-radius: 0;
}
}
.tip {
font-size: 12px;
color: #475669;
margin-left: 5px;
vertical-align: text-bottom;
}
}
.images {
overflow-y: auto;
margin-top: 34px;
height: 520px;
width: 100%;
margin: auto;
}
.upload-images {
text-align: center;
padding-top: 150px;
&.has-files {
padding-top: 35px;
}
.el-upload-list--picture-card .el-upload-list__item {
width: 120px;
height: 120px;
margin: 0 20px 20px 0;
border-radius: 0;
img {
object-fit: cover;
}
&::after {
position: absolute;
display: inline-block;
bottom: 0;
left: 0;
right: 0;
height: 35px;
line-height: 35px;
color: white;
font-size: 13px;
background: rgba(0, 0, 0, .5);
}
&.is-error::after {
content: '网络错误';
}
&.is-bigger::after {
content: '大于2M';
}
}
.el-upload-list--picture-card {
.el-progress {
width: 100px;
.el-progress-circle {
width: 100px !important;
height: 100px !important;
}
}
}
.el-upload--picture-card {
width: 120px;
height: 120px;
line-height: 118px;
border-radius: 0;
}
}
}
}
</style>