vue 文件上传自定义实现

最新推荐文章于 2024-09-25 18:21:39 发布

weixin_34318326

最新推荐文章于 2024-09-25 18:21:39 发布

阅读量1.2k

点赞数

文章标签： javascript json 前端 ViewUI

原文链接：http://www.cnblogs.com/szy-wang/p/10475130.html

版权

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

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

二、使用

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

代码：

<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"> //自定义提交方法

<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>

<el-button :visible="visible" @click="close()">取消</el-button> //visible 控制页面关闭打开，从父页面传过来初始值，close()关闭页面

<el-button type="primary" @click="submitUpload">确定上传</el-button> //上传

</div>

</el-dialog>

</div>

</template>

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