vue+axios+elementUI文件上传与下载

Posted 2022-04-26 mouseleo

vue+axios+elementUI文件上传与下载

 

Simple_Learn 关注

 0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4喜欢 6

1.文件上传

这里主要介绍一种，elementUI官网 上传组件 http-request 这种属性的使用。

 

图片.png

 

代码如下：

 <el-upload class="uploadfile" action="" :http-request=‘uploadFileMethod‘ :show-file-list="false" multiple>
      <el-button class="custom-btn" size="small">上传</el-button>
 </el-upload>

uploadFileMethod方法如下：

        uploadFileMethod(param) 
            const id = this.currentRowObject.id;
            let fileObject = param.file;
            let formData = new FormData();
            formData.append("file", fileObject);

            this.$store
                .dispatch("UploadFile",  formData: formData, id: id )
                .then(response => 
                    if (Array.isArray(response)) 
                        if (response) 
                            this.$message(
                                showClose: true,
                                message: "上传成功。",
                                type: "success"
                            );
                            this.getFileList(id);
                        
                     else 
                        this.$message.error(response.message);
                    
                    console.log("response==", response);
                )
                .catch(message => 
                    console.log("message======================", message);
                    this.$message.error("上传失败，请联系管理员");
                );
        ,

这里需要设置header属性

 

api文件

这里是因为封装了axios方法，还使用了vuex。

 

vuex中文件

可将ajax直接替换成axios就好，具体可参见axios如下：

axios.post(‘/upload‘, formData,  headers:  ‘Content-Type‘: ‘multipart/form-data‘  )

这里formData就是要向后台传的数据。

2.文件下载

2.1 一种是url式的下载，相当于get请求下载
后台提供一个url。前端a标签href设置上就好。

    //带文件名的单个文件下载
    @RequestMapping(path = "/downloadwithname/id", method = RequestMethod.GET)
    public void downloadWithFileName(@PathVariable(name = "id") String strId,
                                     HttpServletResponse response) 
        Long id = Utils.stringTransToLong(strId);
        //设置Content-Disposition
        String fileName = fileService.getFileName(id);
        InputStream inputStream = fileService.download(id);
        OutputStream outputStream = null;
        try 
            response.setHeader("Content-Disposition", "attachment;filename="+ URLEncoder.encode(fileName, "UTF-8"));
            outputStream = response.getOutputStream();
            IOUtils.copy(inputStream, outputStream);
            response.flushBuffer();
         catch (IOException e) 
            logger.error(e.getMessage(), e);
            throw new BizBaseException("server error.");
         finally 
            IOUtils.closeQuietly(inputStream);
            IOUtils.closeQuietly(outputStream);
        
    

 

图片.png

2.2一种是post请求下载 (以流的形式下载文件)

 downloadFile() 
            const rowId = this.currentRowObject.id;
            const rowName = this.currentRowObject.name;
            let params = 
                ids: this.checkedFileId,
                id: rowId
            ;
            this.$store
                .dispatch("DownloadFile", params)
                .then(res => 
                    if (res) 
                        console.log("download===",res);
                        const content = res.data;
                        const blob = new Blob([content]);
                        const fileName = `$rowName.zip`;
                        if ("download" in document.createElement("a")) 
                            // 非IE下载
                            const elink = document.createElement("a");
                            elink.download = fileName;
                            elink.style.display = "none";
                            elink.href = URL.createObjectURL(blob);
                            document.body.appendChild(elink);
                            elink.click();
                            URL.revokeObjectURL(elink.href); // 释放URL 对象
                            document.body.removeChild(elink);
                         else 
                            // IE10+下载
                            navigator.msSaveBlob(blob, fileName);
                        
                    
                )
                .catch(() => 
                    this.$message.error("下载附件失败，请联系管理员");
                );
        

 

api.js

 

vuex

总之如下：

axios.post(‘/download‘, data, responseType:‘blob‘ )

后端这里需要设置header：

response.setContentType("application/octet-stream");

        // 以流的形式下载文件
        try 
            InputStream fis = new BufferedInputStream(new FileInputStream(zipFilePath));
            byte[] buffer = new byte[fis.available()];
            fis.read(buffer);
            fis.close();
            response.reset();// 清空response
            OutputStream toClient = new BufferedOutputStream(response.getOutputStream());
            response.setContentType("application/octet-stream");
            response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(zipName, "UTF-8"));// 如果输出的是中文名的文件，在此处就要用URLEncoder.encode方法进行处理
            toClient.write(buffer);
            toClient.flush();
            toClient.close();
         catch (IOException ex) 
            ex.printStackTrace();
         finally 
            //删除临时压缩文件
            try 
                File f = new File(zipFilePath);
                f.delete();
             catch (Exception e) 
                e.printStackTrace();
            
        

就先简单介绍这里，如有问题可以留言讨论学习。