vue+springboot+element+vue-resource实现文件上传教程


Posted in Javascript onOctober 21, 2020

vue页面设置

<el-upload
       class="upload-demo"
       action=""
       :before-upload="beforeUpload" //上传前操作
       :before-remove="beforeRemove" //移除钱操作
       :multiple="false"  //禁止多选
       :http-request="myUpload" //文件上传,重写文件上传方法,action的路径不会起作用
       accept=".jar"  //限制文件选择类型
       :drag="false"
       :data="param" //参数
       :file-list="fileList">//文件显示列表
       <el-button size="small" type="primary">点击上传</el-button>
       <div slot="tip" class="el-upload__tip">只能上传jar文件,且不超过500kb</div><!-- :headers="head"-->
      </el-upload><!--:on-preview="handlePreview"-->

   /*文件上传前,判断文件名是否存在,等其他处理*/
   beforeUpload(file){
    console.log("文件名",file.name,this.fileList)
    for (let i = 0; i <this.fileList.length ; i++) {
     if (this.fileList[i].name==file.name) {
      this.$message.info("文件已存在");
      return false;
     }
    }
    this.file=file;

    return true;
   },
    /*文件移除前,提示是否删除*/
   beforeRemove(file,fileList){//delJar
    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
    }).then(() => {
     this.$http.get('/aaaa/task/del?taskId='+this.taskId+'&name='+file.name).then(function(res) {
      ......
     });
    }).catch(() => {
     this.getJarList();
     return false;
    });
   },
   /*文件上传,重写文件上传方法,action的路径不会起作用*/
   myUpload(file){
    let fd = new FormData();
    fd.append('file',this.file);//传文件
    fd.append('taskId',this.taskId);//传其他参数
    // fd.append('filename',file.name);//传其他参数
    this.$http.post('/aaaa/task/add',fd).then(function(res) {
     ....
    });
   },

fileList一个对象的内容

name:"xxxx.jar"
status:"success"
uid:123456456

参数

this.param={
  taskId:this.taskId
}

springboot设置

1.请求的注解:produces = "multipart/form-data;charset=utf-8", method = RequestMethod.POS

@RequestMapping(value = "/add", produces = "multipart/form-data;charset=utf-8", method = RequestMethod.POST)
  public String addJar(int taskId, HttpServletRequest request) throws IOException, ServletException {
    ....
    //获取文件
    Part part = request.getPart("file");// input的name值
    String dis = part.getHeader("Content-Disposition");
    // 获取文件名--sdsf.jar
    String fna = dis.substring(dis.indexOf("filename=") + 10, dis.length() - 1);
    String fname = fna.substring(fna.lastIndexOf("\\") + 1, fna.length());// 有的浏览器获取的是路径+文件名
    // 若是文件名为空,说明此时没有选择文件,返回,文件上传失败,选择文件
    if (fname.length() < 1) {
     //此时没有选择文件
    }
    ....
  }

补充知识:elementUI upload图片文件上传到指定后端接口解决方法

1. 一般后端提供接口上传文件都有参数。如果我们不传参就会报错或显示图片不存在,上传失败。所以我们要参考他的文档。action 是上传路径; ==name== 就是传参的属性(关键)。

vue+springboot+element+vue-resource实现文件上传教程

imageUrl: '',

<el-form-item label="封面图片" :required="true">
  <el-upload class="avatar-uploader" action="http://xxx.cn/xx/file/uploadImg/" name='photo' :show-file-list="false"
   :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
   <img v-if="imageUrl" :src="imageUrl" class="avatar">
   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</el-form-item>
handleAvatarSuccess(res, file) {
    console.log(res)
    console.log(file)
    this.imageUrl = URL.createObjectURL(file.raw);
    console.log(this.imageUrl)
   },
   //验证图片格式
   beforeAvatarUpload(file) {
    const isJPG = file.type === 'image/jpeg';
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG) {
     this.$message.error('上传头像图片只能是 JPG 格式!');
    }
    if (!isLt2M) {
     this.$message.error('上传头像图片大小不能超过 2MB!');
    }
    return isJPG && isLt2M;
   },

css代码

/* 图片上传css */
 .avatar-uploader /deep/.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
 }

 .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
 }

 .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
 }
 .avatar {
  width: 100px;
  height: 100px;
  display: block;
 }

参考elementUI文档:https://element.eleme.cn/#/zh-CN/component/upload

以上这篇vue+springboot+element+vue-resource实现文件上传教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js showModalDialog参数的使用详解
Jan 07 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
浅谈javascript中遇到的字符串对象处理
Nov 18 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
JS控件bootstrap datepicker使用方法详解
Mar 25 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
JavaScript实现简单验证码
Aug 24 Javascript
原生小程序封装跑马灯效果
Oct 21 #Javascript
uniapp实现横向滚动选择日期
Oct 21 #Javascript
实现vuex原理的示例
Oct 21 #Javascript
详解JavaScript类型判断的四种方法
Oct 21 #Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 #Javascript
vue中template的三种写法示例
Oct 21 #Javascript
Vue使用v-viewer实现图片预览
Oct 21 #Javascript
You might like
初级的用php写的采集程序
2007/03/16 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
浅析JavaScript动画
2015/06/10 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
小程序实现发表评论功能
2018/07/06 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
[09:31]2016国际邀请赛中国区预选赛Yao赛后采访 答题送礼
2016/06/27 DOTA
使用python实现strcmp函数功能示例
2014/03/25 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
python中数字是否为可变类型
2020/07/08 Python
Django返回HTML文件的实现方法
2020/09/17 Python
python实现简单遗传算法
2020/09/18 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
暇步士官网:Hush Puppies
2016/09/22 全球购物
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
暑期培训班策划方案
2014/08/26 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
《所见》教学反思
2016/02/23 职场文书
《包身工》教学反思
2016/02/23 职场文书
话题作文之自信作文
2019/11/15 职场文书
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS