input 标签在上传中的应用, 这里只记录一下代码,过程和来源参见https://gitbook.cn/books/5db103ad74b4750ec7a3d2bb/index.html
<div>
<button class="avatar-input" >
<i class="el-icon-plus"></i>
<input
style="opacity:0;width:100%;height:100%;position:absolute;top:0;left:0"
@change="uploadSuccess"
multiple="multiple"
accept="image/jpeg, image/jpg, image/png"
type="file"
ref="referenceUpload"
class="avatar-input"
>
</button>
</div>
<script>
export default {
data() {
return {
ruleForm: {
productImages: []
},
};
},
methods: {
uploadSuccess (e) {
const that = this
const getImages = async _ => {
let f = function (i) {
let formData = new FormData()
formData.append('file', e.target.files[i])
return uploadImg(formData, 'proimg').then((res) => {
that.ruleForm.productImages.push({res.data})
}).catch(err => {
console.log(err)
})
}
for (let i = 0; i < e.target.files.length; i++) { // 不能用forEach,有关资料可以自行上网查询一下
await f(i)
}
this.$refs.referenceUpload.value = null // 关键,每次上传成功之后去除临时区的东西
}
getImages()
},
}
}
</script>