zoukankan      html  css  js  c++  java
  • vue+axios+elementUI文件上传与下载

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

    96 
    Simple_Learn 
     0.5 2018.05.30 10:20 字数 209 阅读 15111评论 4

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

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

  • 相关阅读:
    20160130.CCPP体系详解(0009天)
    20160129.CCPP体系详解(0008天)
    20160128.CCPP体系详解(0007天)
    20160127.CCPP体系详解(0006天)
    20160126.CCPP体系详解(0005天)
    程序员_你的“强迫症”有哪些?
    天天写业务代码_如何成为技术大牛?
    阿里云全球首批MVP李文毅专访-一个“改邪归正”的90后
    【毕业季】穿越回毕业前一年_这次你会怎么选
    恢复Hyper-V虚拟机丢失的数据文件过程
  • 原文地址:https://www.cnblogs.com/mouseleo/p/11215309.html
Copyright © 2011-2022 走看看