el-upload 上传附件


                
                
                  点击上传
                  

:limit   限制上传的文件数量

:on-remove 删除文件时触发的钩子函数

	// 移除附件
    handleRemove(file, fileList) {
      console.log('移除附件...')
      console.log(file);
      let pla=this.careA.fileList.indexOf(file)
      console.log(this.careA.fileList.indexOf(file));
      console.log(pla);
      this.careA.fileList.splice(pla,1)
      console.log(this.careA.filePath);
      let s=this.careA.filePath.split(',')
      s.splice(pla,1)
      console.log(s);
      this.careA.filePath=s.join(',')
      if(s===[]){
        this.careA.filePath=''
      }
      console.log(this.careA.filePath);
      this.careA.uploadArr=[]
    },

:on-preview 点击文件时触发的预览的钩子函数

//预览附件
    handlePreview(file){
      window.open(file.url)
    },

:file-list 绑定的文件列表(数组形式)

:auto-upload 是否自动上传

:http-request 手动上传的钩子函数(本人没使用)

:on-change 当文件列表发生改变时触发的钩子函数(本人一般是在这里同步提交文件,获得后端返回的文件路径)

handChange(s,fileList){
      console.log(s);
      this.careA.fileList=fileList
      console.log(this.careA.fileList);
      this.submitUpload()
    },
    // 附件检查
    // 检查附件是否属于可上传类型
    // 检查附件是否超过限制大小
    checkFile() {
      var flag = true
      var tip = ''
      var files = this.$refs.upload.uploadFiles
      files.forEach(item => {
        // 文件过大
        if (this.size !== null && this.size !== '' && item.size > this.fileSize * 1024 * 1024) {
          flag = false
          tip = ' 文件超过' + this.fileSize + 'M'
          this.careA.fileList.pop()
        }
        // 文件类型不属于可上传的类型
        if (this.fileType !== null && this.fileType !== '' && !this.fileType.includes(lastSubstring(item.name, '.'))) {
          flag = false
          tip = ' 文件类型不可上传'
          this.careA.fileList.pop()
        }
      })
      if (!flag) {
        message('error', tip)
      }
      return flag
    },
    // 提交附件(在这里上传)
    submitUpload() {
      if (this.checkFile()) {
         this.careA.fileList.forEach((item) => {
        // 判断文件名的类型
        const formData = new FormData();
        formData.append("theme", this.theme);
        formData.append("file", item.raw);
        // console.log(item.raw);
        // console.log(formData) ;
        axios({ 
          url: `${process.env.VUE_APP_BASE_API}/file/upload`,
          method: "post",
          data: formData,
          headers: {
            "Content-Type": "multipart/form-data;charset=utf-8",
            token: `${getToken()}`,
          },
        })
          .then((res) => {
            // console.log(res);
            // console.log(this.careA.uploadArr );
            const flag = this.careA.uploadArr.indexOf(res.data.data.fileName);
            if (flag != -1) {
              return false;
            }
            this.careA.uploadArr.push(res.data.data.fileName);
            // console.log(this.careA.uploadArr);

            console.log("进入一次");
            if (this.careA.filePath) {
              this.careA.filePath = this.careA.filePath + "," + res.data.data.fileId;
            } else {
              this.careA.filePath = res.data.data.fileId;
            }
               console.log(this.careA.filePath);
           
          })
          .catch((err) => {
            console.log(err);
          });
      });
      }
    },

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