vue 上传 excell文件 blob responseType: “arraybuffer“

小咪咪 2022-12-23 09:52 179阅读 0赞

带excell后缀校验，效果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]

<el-dialog title="文件上传"
         :visible.sync="excelVisible" width="40%" center>
      
          <el-upload style="text-align:center"
          :show-file-list="false"
          :on-error="handleError"
          :on-success="handleSuccess"
          :before-upload="handleBeforeUpload"
            class="upload-demo"
            drag
            :action="upUrl"
            multiple
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">
              仅限xls和xlsx文件
            </div>
          </el-upload>
          <span slot="footer" class="dialog-footer">
            <el-button style="margin-right:20px" size="mini" @click="excelVisible = false">取 消</el-button>
             <el-link target="_blank" :href="downUrl">
                <el-button size="mini" type="success" 
                >下载模板</el-button >
             </el-link>
           
          </span>
        </el-dialog>

data

upUrl : url.upUrl,
          downUrl : url.downUrl,

methods

handleBeforeUpload(file){ 
          // 校验
          let legalName = ['xlsx','xls']
          // 拿到后缀名
           let  name = file.name.substring(file.name.lastIndexOf('.') + 1,file.name.length)
           if(legalName.includes(name)){ 
             console.log(legalName.includes(name));
           }else{ 
             this.$message.info('文件格式不对，仅限xls和xlsx')
              return false
           }
            
          
        },
        handleError(err){ 
          // console.log(err);
           this.$message.info(err.data)
        },
         handleSuccess(response){ 
          // console.log(response);
           if(response.isSuccess){ 
              this.$message.success(response.error)
              this.getListByParam()
              return
           }
           this.$message.info(response.error)
           
         },

如果上传后端返回文件流，但elementUi自带的上传不能设置responseType: “arraybuffer”，只能自己写；

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 1]

uploadSectionFile(params){ 
           
            let form = new FormData()
            form.append('file',params.file)
            this.axios.post(`/busFbx/getGoodsCategory`,form,{ responseType: "arraybuffer"})
            .then((res) => { 
               let a = document.createElement("a");
              let blob = new Blob([res.data]);
              let objectUrl = URL.createObjectURL(blob);
              a.setAttribute("href", objectUrl);
              a.setAttribute("download", "分类模板.xls");
              a.click();
              // console.log(objectUrl);
              URL.revokeObjectURL(objectUrl); // 释放内存
        
            }) .catch((res) => { 
            console.log(res);
            });
            
        },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/9b77be10460d4ccb9634fbee9ca3e9b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201124163724415.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70#pic_center