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 05 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
Node.js 的模块知识汇总
Aug 16 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
Vue打包后访问静态资源路径问题
Nov 08 Javascript
React 实现车牌键盘的示例代码
Dec 20 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
ASP知识讲座四
2006/10/09 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
php中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
获取dom元素那些讨厌的位置封装代码
2010/06/23 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
vue-cli3环境变量与分环境打包的方法示例
2019/02/18 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
python发腾讯微博代码分享
2014/01/10 Python
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
解决python虚拟环境切换无效的问题
2020/04/30 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
Python可以用来做什么
2020/11/23 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
MySQL面试题目集锦
2016/04/14 面试题
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs