web端浏览器上传图片（多文件）

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])即可。