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

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

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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

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

二、使用

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

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

代码:

class=”upload-demo”

drag

:action=”url”        //此处的url是从父页面传过来的动态值,不同页面引用,可能请求的后台地址不一样,所以定义了一个变量接收

:multiple=”false”

:before-upload=”beforeUpload”     //上传之前调用的方法,验证,格式限制等等,大小限制都可以在这个方法中实现

:limit=1     //个数限制

:auto-upload=”false”  //是否立即上传,默认为true

:on-exceed=”handleExceed” //文件超出个数限制时的钩子

:http-request=”uploadFile”>  //自定义提交方法

将文件拖到此处,或
点击上传
只能上传.xlsx文件
一次只能上传一个文件

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/170646.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 安卓中activity的生命周期_activity生命周期调用顺序

    安卓中activity的生命周期_activity生命周期调用顺序前言很高兴遇见你~欢迎阅读我的文章。关于Activity生命周期的文章,网络上真的很多,有很多的博客也都讲得相当不错,可见Activity的重要性是非常高的。事实上,我猜测每个android开发者接触的第一个android组件都是Activity。我们从新建第一个Activity开始,运行了代码,看到模拟机上显示了一个MainActivity标题和一行HolleWorld,从此打开Android世界的大门。本篇文章讲解的重点是Activity的生命周期,在文章的最后也会涉及Activity的设计。不

  • 【转】Smartphone–Android真机管理平台[通俗易懂]

    【转】Smartphone–Android真机管理平台

  • pycharm 打不开了_pycharm激活成功教程之后打不开

    pycharm 打不开了_pycharm激活成功教程之后打不开pycharm打不开问题总结1:第一步:进入如下路径,找到cmd.exe,右键选择“以管理员身份运行”;第二步:在打开的cmd窗口中,输入netshwinsockreset,按回车键;第三步:重启电脑;第四步:重启后,双击pycharm图标就能打开了!2:你下载的应该是官方版的,然后自己加了网上下载的.jar激活成功教程插件,并添加了这个插件的路径到.vmoptions文件。打不开是因为你修改…

  • break 与continue语句的区别_return用法

    break 与continue语句的区别_return用法来源:http://blog.csdn.net/u014612521/article/details/42720987break可以离开当前switch、for、while、dowhile的程序块,并前进至程序块后下一条语句,在switch中主要用来中断下一个case的比较。在for、while与dowhile中,主要用于中断目前的循环执行。continue的作用与

  • STM32芯片之看门狗

    STM32芯片之看门狗本章介绍STM32F4**系列芯片的看门狗模块内容STM32F4**系列芯片具有两个嵌入式看门狗外设,具有安全性高、定时准确及使用灵活的优点。两个看门狗外设(独立和窗口)均可用于检测并解决由软件错误

  • mysql实时同步工具|sqlserver同步工具|常见的数据库同步工具「建议收藏」

    mysql实时同步工具|sqlserver同步工具|常见的数据库同步工具「建议收藏」SyncNavigator是一款功能强大的数据库同步软件,适用于SQLSERVER,MySQL,具有自动/定时同步数据、无人值守、故障自动恢复、同构/异构数据库同步、断点续传和增量同步等功能,支持Windowsxp以上所有操作系统,适用于大容量数据库快速同步。安装包下载地址:https://www.syncnavigator.cn/Setup.zip帮助文档地址:https://www.syncnavigator.cn/Help_zh-CN.chmWeb文档地址:https://www…

    2022年10月29日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号