文件上传当中,多数需求是需要我们手动上传的,原生的上传,是比较麻烦的,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,实在不行了,就只能另辟蹊径了