公司项目要求做一个合同照片的批量上传，项目是用 element ui 框架，但是只要求兼容华为 pad，所以看了看决定还是写一个简单的 demo。
以下是代码，欢迎大神指出错误和不足。
html:
<template>
<div class="form-bar-child">
<div class="upload-contract" v-for="(item, index) in conImgList" :key="item.id">
<img :src="item" alt=""class="cover-img" />
<span @click="delimg(index)"></span>
</div>
<div class="upload-contract-btn" v-if="conImgList.length < imgNumberLimit">
<i class="icon-upload-contract"></i>
<input type="file" class="contract-input" multiple @change="fileChange($event)" />
</div>
</div>
</template>js
data() {
return {afterimgfiles: [], // 上传到后台的数据
conImgList: [], // 预览地址
imgNumberLimit: 9, // 限制上传数量
maxSize: 10240000 / 2
};
},methods: {
/* eslint-disable */
fileChange(e) {
const _this = this
const event = event || window.event;
const file = event.target.files
const leng = file.length;
if (this.conImgList.length + leng > this.imgNumberLimit) {this.$message.error("最多只能上传" + this.imgNumberLimit + "张图片！");
return;
}
if (file.size > this.maxSize) {this.$message.error("图片太大，不允许上传！");
return;
}
for (var i = 0; i < leng; i++) {const reader = new FileReader();
_this.afterimgfiles.push(file[i])
reader.readAsDataURL(file[i]);
reader.onload = function(e) {_this.conImgList.push(e.target.result); // base 64
};
console.log(_this.afterimgfiles)
}
},
delimg(index) {this.afterimgfiles.splice(index, 1);
this.conImgList.splice(index, 1);
},
}