vue中element 的upload组件发送请求给后端操作


Posted in Javascript onSeptember 07, 2020

1.用到了before-upload属性,

用于在上传文件前的校验,并且发送请求给后端,传输格式进行文件流传输

什么都不用设置,action属性随便设置,不能为空即可!

在before-upload属性的方法中的代码如下:

var _this = this;
   debugger;
   // var files=file.target.files[0];
   debugger;
   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;
   let formData = new FormData();
   formData.append("file", file);
   axios
    .post("http://192.168.0.116:8083/pic/upload", formData)
    .then(function(response) {
     _this.enclosure.openPermitimgUrl = response.data;
     // alert(response.data);
     console.log(response);
    })
    .catch(function(error) {
     alert("上传失败");
     console.log(error);
    });

补充知识:vue element 实现上传导入功能(请求到后台接口)

1、主要用到了element中upload的onSuccess方法

action后面跟着的是上传文件后要被导入的接口

data是我们可能上传多个 定义一个数组

vue中element 的upload组件发送请求给后端操作

2、在data中定义 uploadBase:{}

3、请求后台的导入接口 传给后台所需要的参数

vue中element 的upload组件发送请求给后端操作

以上这篇vue中element 的upload组件发送请求给后端操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 控制小数位数的实现代码
Aug 02 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
JavaScript简介
Feb 15 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
详解webpack 多入口配置
Jun 16 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 Javascript
Webpack 4如何动态切割JS注入文件名详解
Jul 09 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 #Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 #Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 #Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 #Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 #Javascript
一篇文章带你从零快速上手Rollup
Sep 07 #Javascript
基于vue hash模式微信分享#号的解决
Sep 07 #Javascript
You might like
PHP自定义函数格式化json数据示例
2016/09/14 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
Firefox div高度自适应
2009/04/28 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
python实现图片文件批量重命名
2020/03/23 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
对python内置map和six.moves.map的区别详解
2018/12/19 Python
python支付宝支付示例详解
2019/08/22 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
卫校护理专业毕业生求职信
2013/11/26 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
大学生就业策划书范文
2014/04/04 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
离婚案件原告代理词
2015/05/23 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js
MySQL七种JOIN类型小结
2021/10/24 MySQL
python ConfigParser库的使用及遇到的坑
2022/02/12 Python
Python作用域和名称空间的详细介绍
2022/04/13 Python
教你如何用cmd快速登录服务器
2022/06/10 Servers