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让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
javascript设计模式 封装和信息隐藏(上)
Jul 24 Javascript
js跑马灯代码(自写)
Apr 17 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 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递归函数返回值使用方法
2013/02/18 PHP
php类常量的使用详解
2013/06/08 PHP
PHP函数http_build_query使用详解
2014/08/20 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
ASP中Sub和Function的区别说明
2020/08/30 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
jQuery源码分析之sizzle选择器详解
2017/02/13 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
详解Python编程中包的概念与管理
2015/10/16 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
毕业寄语大全
2014/04/09 职场文书
2014离婚协议书范文
2014/09/10 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
美丽人生观后感
2015/06/03 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript