vue的文件上傳組件 upload ,擁有支持多種格式文件上傳，單文件多文件等都支持，許多項目現在都少不了文件上傳功能，但是vue 的upload組件如果直接引用，肯定也有一些不方便之處，有的時候需要傳參數，需要手動觸發上傳方法，而不是選擇了文件就上傳，所以結合我項目實例，寫一vue 自定義文件上傳的實現，包括前端和后台的處理以及參數的接收。
一、先認識一下vue 的upload組件，官網鏈接 http://element-cn.eleme.io/#/zh-CN/component/upload，這里不多做解釋，大家自己看
二、使用
這個組件有多種樣式，我在這里只展示一種，如圖所示
代碼：
<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>
由於我這個是做的一個公共組件，可以作為其他頁面的一個組件給放進去，所以會有一些特別之處，，大部分在代碼中都有注釋。
三、父頁面部分代碼
<!--導入窗口-->
<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
}
四、后台代碼處理
1、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;
}
2、service實現
@Override
public 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;
}
3、注，本次后台代碼只針對excel文件，如果是其他文件，也可以進行百度，處理方法很簡單