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 相关文章推荐
用 Javascript 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
node.js中axios使用心得总结
Nov 29 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
antd日期选择器禁止选择当天之前的时间操作
Oct 29 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实现对文件压缩简单的方法
2019/09/29 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
Javascript----文件操作
2007/01/18 Javascript
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
document.compatMode介绍
2009/05/21 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
jQuery Ajax调用WCF服务详细教程
2015/03/31 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
2017/04/11 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
python 随机数生成的代码的详细分析
2011/05/15 Python
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
Python实现字符串匹配算法代码示例
2017/12/05 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
pycharm运行scrapy过程图解
2019/11/22 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
匡威爱尔兰官网:Converse爱尔兰
2019/06/09 全球购物
多媒体专业自我鉴定
2014/02/28 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
十八大标语口号
2014/10/09 职场文书
先进事迹材料范文
2014/12/29 职场文书
个人自荐书怎么写
2015/03/26 职场文书
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
Innodb存储引擎中的后台线程详解
2022/04/03 MySQL