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 相关文章推荐
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
date.parse在IE和FF中的区别
Jul 29 Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
浅谈javascript中return语句
Jul 15 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
Javascript之String对象详解
Jun 08 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
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
Zend Guard使用指南及问题处理
2015/01/07 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
详解Python中最难理解的点-装饰器
2017/04/03 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
沙特阿拉伯排名第一的在线时尚购物应用程序:1Zillion
2020/08/08 全球购物
初中毕业典礼演讲稿
2014/09/09 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
小学教师见习总结
2015/06/23 职场文书