vue 文件上傳自定義實現

vue的文件上傳組件 upload ,擁有支持多種格式文件上傳，單文件多文件等都支持，許多項目如今都少不了文件上傳功能，可是vue 的upload組件若是直接引用，確定也有一些不方便之處，有的時候須要傳參數，須要手動觸發上傳方法，而不是選擇了文件就上傳，因此結合我項目實例，寫一vue 自定義文件上傳的實現，包括前端和後臺的處理以及參數的接收。

1、先認識一下vue 的upload組件，官網連接 http://element-cn.eleme.io/#/zh-CN/component/upload，這裏很少作解釋，你們本身看

2、使用

   這個組件有多種樣式，我在這裏只展現一種，如圖所示

代碼：

<template>

<div>

<el-dialog title="導入數據" :visible="visible" @close="close" width="400px">

<el-upload ref="upload"         //ref屬性值必定要有，提交的時候會用到

class="upload-demo"

drag

:action="url"        //此處的url是從父頁面傳過來的動態值，不一樣頁面引用，可能請求的後臺地址不同，因此定義了一個變量接收

:multiple="false" 

:before-upload="beforeUpload"     //上傳以前調用的方法，驗證，格式限制等等，大小限制均可以在這個方法中實現

:limit=1     //個數限制

:auto-upload="false"  //是否當即上傳，默認爲true

:on-exceed="handleExceed" //文件超出個數限制時的鉤子

:http-request="uploadFile">  //自定義提交方法

 

<i class="el-icon-upload"></i>

<div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>

<div class="el-upload__tip" slot="tip">只能上傳.xlsx文件</div>

<div class="el-upload__tip" slot="tip">一次只能上傳一個文件</div>

</el-upload>

<div slot="footer" class="dialog-footer">

<el-button :visible="visible" @click="close()">取 消</el-button>         //visible 控制頁面關閉打開，從父頁面傳過來初始值，close()關閉頁面

<el-button type="primary" @click="submitUpload">肯定上傳</el-button> //上傳

</div>

</el-dialog>

</div>

</template>

<script>

export default {

props:{visible:false, //父頁面傳遞參數

initData:{}, //父頁面傳遞參數

url:""  //父頁面傳遞上傳url

},

watch: {  //監聽參數值改變

initData(newValue,oldValue){

this.getData(newValue);

console.log("newValue2333",newValue);

}

},

data() {

return {

params:{},

}

},

mounted(){

},

methods:{

close() {

this.$emit("update:visible", false);

},

beforeUpload (file) {  //設置只能上傳excel文件

console.log('beforeUpload')

console.log(file.type)

const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'

if(isExcel){

return true;

}else{

this.$message.warning(`只能上傳excel文件`)

return false;

}

},

// 上傳文件個數超過定義的數量

handleExceed (files, fileList) {

this.$message.warning(`當前限制選擇 1 個文件，請刪除後繼續上傳`)

},

// UploadUrl:function(){

// return

// },

getData(initData){   //參數值改變從新賦值

this.params=initData;

},

//確認上傳

submitUpload(){

this.$refs.upload.submit();

},

//開始上傳文件

uploadFile(content){

console.log("uploadFile",content);

const formData=new FormData();

formData.append("file",content.file);

formData.append("params",this.params);    //後臺接收param時能夠vue能夠先將params轉成json字符串，後臺接收一個json字符串再遍歷，本身百度

//發送請求

console.log(this.params);

this.commonPost({

url:content.action,

params:formData,

timeout:2000,

}).then(data=>{

this.$message({

type:"success",

message:"上傳文件成功"

});

//關閉上傳彈出框

this.close();

})

}

}

};

</script>

 

因爲我這個是作的一個公共組件，能夠做爲其餘頁面的一個組件給放進去，因此會有一些特別之處，，大部分在代碼中都有註釋。

 

3、父頁面部分代碼

<!--導入窗口-->

<InportExcel :visible.sync="inportExcelVisible" :initData="fileData" :url="urlString"></InportExcel>   在須要的地方引用這句話，

 

import InportExcel from '@/api/pfm/common/InportExcel';   //引入InportExcel

 

watch:{

headerId:function(val,oldval){

if(val && val != -1){

this.fileData={};          //參數監聽

this.fileData.currentHeaderId=val; //參數賦值

this.urlString=" http://localhost:8080/pfm/file/upFile"; //url賦值

 

}

}

 

components:{      //InportExcel註冊

InportExcel:InportExcel

}

 

 

4、後臺代碼處理

一、controller

@PostMapping("/upFile")
public Object upLoadFile(@RequestParam("file") MultipartFile file,@RequestParam("params") String params,
                         HttpServletResponse response,HttpServletRequest request){
   Workbook workbook=null;
    try{
       if(params!=null){
          JSONObject json=JSONObject.parseObject(params);
          if(json.containsKey("currentHeaderId")){
             System.out.println(json.get("currentHeaderId").toString());
          }
       }
       workbook= fileService.uploadFile(file,request,response);
    }catch (Exception e){
       logger.info(e.getMessage());
    }
    return workbook;
}

 二、service實現

@Overridepublic Workbook uploadFile(MultipartFile file, HttpServletRequest request, HttpServletResponse response) throws IOException {   checkFile(file);   System.out.println(file);   return getWorkBook(file);   //接收文件}public static void checkFile(MultipartFile file) throws IOException {   if(null==file){      logger.info("文件不存在");      throw new FileNotFoundException("文件不存在");   }   String fileName=file.getOriginalFilename();   System.out.println(fileName.endsWith("xls"));   if(!fileName.endsWith("xls")&&!fileName.endsWith("xlsx")){      logger.info("不是excel文件");      throw new IOException(fileName+"不是excel文件");   }}public static Workbook getWorkBook(MultipartFile file){   String fileName=file.getOriginalFilename();   Workbook workbook=null;   try{      InputStream is=file.getInputStream();      if(fileName.endsWith("xls")){         workbook=new HSSFWorkbook(is);      }else if(fileName.endsWith("xlsx")){         workbook=new XSSFWorkbook(is);      }   }catch (IOException e){      logger.info(e.getMessage());   }   return workbook;}三、注，本次後臺代碼只針對excel文件，若是是其餘文件，也能夠進行百度，處理方法很簡單