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)


相关推荐

  • Vue进阶(幺零七):arr.forEach() 跳出循环

    Vue进阶(幺零七):arr.forEach() 跳出循环我们都知道for循环里要跳出整个循环是使用break,但在数组中用forEach循环如要退出整个循环呢?使用break会报错,使用return也不能跳出循环。使用break将会报错:vararr=[1,2,3,4,5];varnum=3;arr.forEach(function(v){if(v==num){break;}console.log(v);});使…

  • python猪脸识别_京东JDD猪脸识别比赛「建议收藏」

    python猪脸识别_京东JDD猪脸识别比赛「建议收藏」pig_face_recognition京东JDD猪脸识别比赛pytorch-baseline1.运行环境TeslaK20c集群单节点双卡RedHat4.4.7-3Python2.7.13cuda8.0cudnn5.0pytorch0.3.02.从视频中截取出猪用yolo-9000算法,人工打label后,对ffmpeg提取出的视频帧进行猪的目标检测,框出猪的主体部分,为后续…

  • 2021最新Springboot面试题含答案[通俗易懂]

    2021最新Springboot面试题含答案[通俗易懂]1.开启SpringBoot特性有哪几种方式?1)继承spring-boot-starter-parent项目2)导入spring-boot-dependencies项目依赖2.SpringBoot需要独立的容器运行吗?可以不需要,内置了Tomcat/Jetty等容器。3.运行SpringBoot有哪几种方式?1)打包用命令或者放到容器中运行2)用Maven/Gradle插件运行3)直接执行main方法运行4.SpringBoot自动配置原理是什么?

  • 关于slam

    关于slam什么是SLAM?机器人在未知环境中,要实现智能化需要完成三个任务,第一个是定位(Localization),第二个是建图(Mapping),第三个则是随后的路径规划(Navigation)。  之前地平线的高翔博士用这样一句话概括SLAM的释义。不过实际生活中的SLAM都是和激光雷达或者单目/双目摄像头结合的形式出现在我们面前的,有时甚至跟更多的传感器融合,这让很多人觉得这个技术不是一两句话能

    2022年10月28日
  • win7 64位wamp2.5无法启动MSVCR110.DLL丢失听语音

    win7 64位wamp2.5无法启动MSVCR110.DLL丢失听语音

  • 怎么测试网站的稳定性_稳定性长期试验需进行多少个月试验

    怎么测试网站的稳定性_稳定性长期试验需进行多少个月试验今天面试遇到一个问题,如何进行网站的稳定性测试?因为之前从事的是电信行业,其稳定性测试是发送确定的traffic,运行72小时,观测系统的资源使用情况,traffic处理是否正常,有无内存泄漏,有无进程崩溃,其他资源使用是否正常等等。所以也给了一个类似的稳定性测试思路:按照系统设计容量的性能指标,模拟最大并发访问需求,运行72小时,看系统响应时间,监控资源利用的方法。回来查询发现,网易对这个问题也…

发表回复

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

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