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 相关文章推荐
qTip2 精致的基于jQuery提示信息插件
Feb 17 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
js运动事件函数详解
Oct 21 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
es6学习之解构时应该注意的点
Aug 29 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 Javascript
JS数组实现分类统计实例代码
Sep 30 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
理解PHP5中static和const关键字的区别
2007/03/19 PHP
php下过滤HTML代码的函数
2007/12/10 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
初识laravel5
2015/03/02 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
2020/02/03 Javascript
python中的变量如何开辟内存
2018/06/26 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
介绍一下SQL Server的全文索引
2013/08/15 面试题
某公司C#程序员面试题笔试题
2014/05/26 面试题
实习单位推荐信范文
2013/11/27 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
《雷雨》教学反思
2014/02/20 职场文书
企业新年寄语
2014/04/04 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
浅谈pytorch中stack和cat的及to_tensor的坑
2021/05/20 Python
pytorch--之halfTensor的使用详解
2021/05/24 Python
python playwrigh框架入门安装使用
2022/07/23 Python
Windows server 2016服务器基本设置
2022/08/14 Servers