element ui formdata一次上传多个文件(全)

//html代码
   
          选取文件
          上传到服务器
        
//js
export default {
  components: {},
  props: [],
  data() {
    return {
      fileList: [],

    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  methods: {
    // 拖拽上传
    beforeRemove(file, fileList) {
      this.fileList = fileList;
      // return this.$confirm(`确定移除 ${file.name}?`);
    },
    // 移除附件
    upLoadRemove(file, fileList) {
      let tempFileList = [];
      for (var index = 0; index < this.fileList.length; index++) {
        if (this.fileList[index].name !== file.name) {
          tempFileList.push(this.fileList[index]);
        }
      }
      this.fileList = tempFileList;
    },
    // 监控上传文件列表
    uploadChange(file, fileList) {
      console.log(fileList)
      let existFile = fileList.slice(0, fileList.length - 1).find((f) => f.name === file.name);
      if (existFile) {
        this.$message.error("当前文件已经存在!");
        fileList.pop();
      }
      this.fileList = fileList;
    },
    // 上传到服务器  formidable接收
    async submitUpload() {
      // 上传文件大小不能超过100MB!
      const isLt100M = this.fileList.every(
        (file) => file.size / 1024 / 1024 < 100
      );
      let formData = new FormData();
      this.fileList.forEach((item) => {
        formData.append("files", item.raw);
      });
      formData.append("parentId", this.mapValue);
      // append追加后console.log后仍为空,需要用formData.get("键")的方法获取值
      // const res = await fileUpload(formData);
      console.log(formData);
    },
    // 点击文件进行下载
    downLoadFile(file) {
      var a = document.createElement("a");
      var event = new MouseEvent("click");
      a.download = file.name;
      a.href = file.url;
      a.dispatchEvent(event);
    },
    //  :on-exceed="handleExceed"
    // 选取文件超过数量提示
    // handleExceed(files, fileList) {
    //   this.$message.warning(`当前限制选择 5 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
    // },

  }
}

你可能感兴趣的:(ui,vue.js,elementui)