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 相关文章推荐
json格式化/压缩工具 Chrome插件扩展版
May 25 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
Apr 15 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
一款简单的jQuery图片标注效果附源码下载
Mar 22 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
Python的迭代器和生成器
2015/07/29 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
python3.x+pyqt5实现主窗口状态栏里(嵌入)显示进度条功能
2019/07/04 Python
python实现数据分析与建模
2019/07/11 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
python飞机大战游戏实例讲解
2020/12/04 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
小学教师管理制度
2014/01/18 职场文书
最新创业融资计划书
2014/01/19 职场文书
商铺租赁意向书
2014/04/01 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
内勤岗位职责范本
2015/04/13 职场文书
刑事辩护词范文
2015/05/21 职场文书
会议营销主持词
2015/07/03 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
强烈推荐:小学生:暑假作息时间表(值得收藏)
2019/07/09 职场文书
python b站视频下载的五种版本
2021/05/27 Python
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers