关于iview组件库upload手动上传的问题

649 阅读1分钟

文件上传当中,多数需求是需要我们手动上传的,原生的上传,是比较麻烦的,iview组件库当中提供的upload文件上传在自动上传一点问题都没有,但是手动上传就有坑,首先文档是没有提供手动上传的api的。

解决办法

通过ref方式获取组件对象,然后找到组件内部没有在组件库暴露的aip,post方式

//模板
<Upload
           :action="BASEURL + '/RedeemCode/ImportRedeemCode'"//上传地址
          :data="uploadParams"//附加参数
          accept=".xlsx,.xls,.xlsm"//类型限制
          :on-format-error="handleFormatError"//文件类型错误回调
          :on-success="handleSuccess"//上传成功回调
          :before-upload="handleUpload"//上传之前的回调(这个方式返回fale就可以阻止默认自动上传)
          ref="upload"
          multiple
          :disabled="isUploadLoading"
            >
            
            
 //js
  // 手动控制上传(关键在于这个方法返回true就可以组织自动上传
    handleUpload(file) {
      this.filesList.push({ name: file.name, file });
      this.file = file;
      return true;
    },
    //提交上传图片
    uploadExcel() {
      this.$refs.upload.post(this.file);//调用组件内部上传api
    },

上面就是自动上传的实现,可以在自动上传当中做很多其他的需求,比如展示上传列表等

总结

在使用组件库的时候,可能有些组件内部没有暴露一些api和属性,因此我们可以尝拿到组件对象,然后查找有没有我们需要的api,实在不行了,就只能另辟蹊径了