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

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();
            }
        }

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