el-upload 上传附件

<!--  :before-remove="()=>false"  禁止删除-->
                <!-- :on-remove="handleRemove" 删除 -->
                <el-upload
                  ref="upload"
                  :limit='5'  
                  :on-remove="handleRemove"
                  :on-error="onError"
                  :on-preview="handlePreview"
                  :file-list="careA.fileList"
                  :auto-upload="false"
                  :http-request="uploadFile"
                  :on-change="handChange"
                  action="string"
                  multiple="multiple"
                >
                  <el-button slot="trigger"  type="primary" >点击上传</el-button>
                  </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);
          });
      });
      }
    },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值