大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
vue的文件上传组件 upload ,拥有支持多种格式文件上传,单文件多文件等都支持,许多项目现在都少不了文件上传功能,但是vue 的upload组件如果直接引用,肯定也有一些不方便之处,有的时候需要传参数,需要手动触发上传方法,而不是选择了文件就上传,所以结合我项目实例,写一vue 自定义文件上传的实现,包括前端和后台的处理以及参数的接收。
一、先认识一下vue 的upload组件,官网链接 http://element-cn.eleme.io/#/zh-CN/component/upload,这里不多做解释,大家自己看
二、使用
这个组件有多种样式,我在这里只展示一种,如图所示
代码:
class=”upload-demo”
drag
:action=”url” //此处的url是从父页面传过来的动态值,不同页面引用,可能请求的后台地址不一样,所以定义了一个变量接收
:multiple=”false”
:before-upload=”beforeUpload” //上传之前调用的方法,验证,格式限制等等,大小限制都可以在这个方法中实现
:limit=1 //个数限制
:auto-upload=”false” //是否立即上传,默认为true
:on-exceed=”handleExceed” //文件超出个数限制时的钩子
:http-request=”uploadFile”> //自定义提交方法
点击上传
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账号...