vue實現文件上傳與下載

一、文件上傳（多個文件上傳）

借鑒博客：https://www.cnblogs.com/yuyujuan/p/10867557.html

 

　　1、文件上傳彈窗代碼：

<!--================================上傳文件彈窗=========================-->
        <el-dialog :title="addFileTitleName" :visible.sync="dialogAddFile" width="500px" style="padding:0;" @close="resetAddFile" >
            <el-input v-model="addFileName" autocomplete="off" size="small" style="width: 300px; display: none;" ></el-input>

            <div class="add-file-right" >
                <input type="file" ref="clearFile" @change="getFile($event)" multiple="multiplt" class="add-file-right-input" style="margin-left:70px;" accept=".docx,.doc,.xls,.xlsx,.ppt,.pptx,.pdf,.txt">
                <div style="margin-top: 20px;">
                    <span class="add-file-right-more">支持擴展名：.doc，.docx，.xls，.xlsx，.ppt，.pptx，.pdf，txt </span>
                </div>
            </div>
            <div class="add-file-list">
                <ul>
                    <li v-for="(item, index) in addArr" :key="index"><a >{{item.name}}</a></li>
                </ul>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitAddFile" size="small">開始上傳</el-button>
                <el-button @click="resetAddFile" size="small">全部刪除</el-button>
            </div>
        </el-dialog>

　　

 

　　2、文件上傳對話框里面對應的參數和上傳方法，js代碼：

 //============上傳文件參數初始化==========================================
  dialogAddFile: false,//上傳文件彈窗
  addFileTitleName: "上傳文件窗口",
  addFileName: "",
  addArr: [],




三個js方法：

//==================上傳文件操作函數=============================================
getFile(event){    //獲取上傳文件方法
    var file = event.target.files;
    for(var i = 0;i<file.length;i++){
        //    上傳類型判斷
        var imgName = file[i].name;
        var idx = imgName.lastIndexOf(".");
        if (idx != -1){
            var ext = imgName.substr(idx+1).toUpperCase();
            ext = ext.toLowerCase( );
            //pdg,doc,docx.xls,.xlsx,.ppt,pptx,
            if (ext!='pdf' && ext!='doc' && ext!='docx' && ext!='xls' && ext!='xlsx' && ext!='ppt' && ext!='pptx' && ext!='txt'){

            }else{
                this.addArr.push(file[i]);
            }
        }else{

        }
    }
},


submitAddFile(){    //===========提交上傳文件到后台保存方法
    if(0 == this.addArr.length){
        this.$message({
            type: 'info',
            message: '請選擇要上傳的文件'
        });
        return;
    }

    var formData = new FormData();
    for(var i=0;i<this.addArr.length;i++){
        formData.append('files',this.addArr[i]);
    }
    let config = {
        headers: { "Content-Type": "multipart/form-data" }
    };
    console.log(formData);
　　//接口請求使用的是自己封裝了一下的axios
    this.$http.post('/xxxx/uploadMyFile', formData, config).then(res => {
        console.log(res);

        this.$message({
            message: '操作成功',
            type: 'success'
        });

    }).catch((error) => {
        alert("操作失敗，出現錯誤：" + error)

    });

},

//清除上傳的文件方法
resetAddFile(){
    this.addFileName = "";
    this.addArr =[];
},

 

　　3、java后端接口代碼：

/**
     * （上傳文件）
     * @param file
     * @return
     */
    @RequestMapping( value = "/uploadMyFile", method = RequestMethod.POST)
    @ResponseBody
    public ResultBase<String> uploadMyFile(@RequestParam(value = "files" , required = true) MultipartFile[] files){
        log.info("uploadImg方法上傳圖片開始");
        ResultBase<String> rb = new ResultBase<String>();
        try {

            log.info("調試打印：" + files.clone());


            rb.setCode(0);
        } catch (Exception e) {
            rb.setCode(1);
            log.error("uploadMyFile方法操作異常：" + e);
        }

        return rb;
    }

 

　　

　　=============親測無誤，前端效果圖==========================

 

 

 

 

二、文件下載====================================================================================================

 重點記下：

　　cao,cao,cao，使用axios請求有個巨坑，在百度了很多次后發現axios不管用get還是用post請求，后端代碼控制瀏覽器彈出下載是無效的，導致要在請求返回結果的數據流里用js轉成Blob對象，再用js調起瀏覽器的下載彈窗，代碼示例如下：

　　【文件下載雖然實現了，巨坑就來了，用這塊代碼下載的文件內容中文的全是亂碼，不管在java代碼怎么設置repsonse的編碼格式，沒    一   點   卵    用】

this.$http.get('/xxxx/downMyFile').then(res => {
                    console.log("下載文件返回res");
                    console.log(res);
                    if(!res.data){
                        this.$message.error("下載內容為空");
                        return;
                    }
                    let url = window.URL.createObjectURL(new Blob([res.data], {type: 'application/octet-stream'}));
                    let link = document.createElement('a');
                    link.style.display = 'none';
                    link.href = url;

                    // const fileName = res.headers["content-disposition"].split(";")[1].split("=")[1];//文件名稱
                    const fileName = obj.file_name;//文件名稱
                    link.setAttribute('download', fileName);
                    document.body.appendChild(link);
                    link.click();

                    window.URL.revokeObjectURL(url);//釋放url對象所占資源
                    document.body.removeChild(link);//用完刪除

                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });


                }).catch((error) => {
                    alert("操作失敗，出現錯誤：" + error)

                });

 

 

　　最后怎么解決的呢，不用axios的請求，直接用window.location.href打開后端下載接口地址，完美解決：

var objParam = "?url=" + row.url + "&file_name="+row.file_name;  //地址后面帶的參數，根據自己業務來

 window.location.href = 'xxx/xxxx/downloadMyFile'+objParam;

 

 

 

 后面java代碼：

    @ApiOperation("")
    @RequestMapping(value = "/downloadMyFile", method = RequestMethod.GET)
    public void downloadMyFile(HttpServletRequest request, HttpServletResponse response) {

        log.info("downloadMyFile方法");

        try {

            String url = request.getParameter("url");
            String file_name = request.getParameter("file_name");

            ServletOutputStream os = null;
//            File file = new File("D:\\testSaveFile\\8ef7672a14ea4362b6bd48a1743b01c0測試上傳文件.docx");
            File file = new File(savefilepath+url);     //savefilepath：為寫死文件所在地址：D:\\testSaveFile\\
//            String filename = file.getName();
            FileInputStream fileInputStream = new FileInputStream(file);
            InputStream fis = new BufferedInputStream(fileInputStream);
            byte[] buffer = new byte[fis.available()];
            fis.read(buffer);
            fis.close();
            // 清空response
            response.reset();
            // 設置response的Header
            response.setContentType("text/html;charset=utf-8");
            //Content-Disposition的作用：告知瀏覽器以何種方式顯示響應返回的文件，用瀏覽器打開還是以附件的形式下載到本地保存
            //attachment表示以附件方式下載   inline表示在線打開   "Content-Disposition: inline; filename=文件名.mp3"
            // filename表示文件的默認名稱，因為網絡傳輸只支持URL編碼的相關支付，因此需要將文件名URL編碼后進行傳輸,前端收到后需要反編碼才能獲取到真正的名稱
    //      filename=filenameEncoding(filename,request);
            response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(file_name, "UTF-8"));
            // 告知瀏覽器文件的大小
            response.addHeader("Content-Length", "" + file.length());
            OutputStream outputStream = new BufferedOutputStream(response.getOutputStream());
            response.setContentType("application/octet-stream");
            outputStream.write(buffer);
            outputStream.flush();
            outputStream.close();


        } catch (Exception e) {
            log.error("uploadMyFile方法操作異常：" + e);
        }

 

 

 

 

 

 

 

 

 

 

 

 

 

。