template部分:
<!-- 上传图片 -->
<div class="upload-box" @click="uploadFile">
<div class="upload-text">上传</div>
<!-- multiple -- 选择多个文件 -->
<input type="file" id="importFile" @change="checkedFile" style="display: none"
accept="image/*" multiple />
</div>
js部分:
// 点击上传图片
uploadFile() {
const loader = document.getElementById("importFile");
loader.click();
},
checkedFile({ target }) {
let arr = Array.from(target.files)
const formData = new FormData();
arr.forEach((item) => {
formData.append("file", item);
});
formData.append("id", xxx.id); // 业务数据
formData.append("code", xxx.code); // 业务数据
const msg = this.$Message.loading({
content: "正在上传...",
duration: 0,
closable: true,
});
this.$api.xxx(formData).then((res) => {
setTimeout(msg, 5);
if (res.error !== "error") {
this.$Message.success("上传成功");
}
})
.catch(() => {
setTimeout(msg, 5);
});
},
注:input中删掉multiple,就可以限制单次只能选择一个图片,此时checkedFile方法中不需要对"file"做循环插入,改为formData.append("file", target.files[0])即可。