vue文件上传功能_vue如何自定义组件

vue的文件上传组件 upload ,拥有支持多种格式文件上传，单文件多文件等都支持，许多项目现在都少不了文件上传功能，但是vue 的upload组件如果直接引用，肯定也有一些不方便之处，有的时候需要传参数，需要手动触发上传方法，而不是选择了文件就上传，所以结合我项目实例，写一vue 自定义文件上传的实现，包括前端和后台的处理以及参数的接收。

一、先认识一下vue 的upload组件，官网链接 http://element-cn.eleme.io/#/zh-CN/component/upload，这里不多做解释，大家自己看

二、使用

这个组件有多种样式，我在这里只展示一种，如图所示

代码：

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

})

}

}

};

由于我这个是做的一个公共组件，可以作为其他页面的一个组件给放进去，所以会有一些特别之处，，大部分在代码中都有注释。

三、父页面部分代码

   在需要的地方引用这句话，

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文件，如果是其他文件，也可以进行百度，处理方法很简单