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下操作css的float属性的特殊写法
Aug 22 Javascript
Prototype Class对象学习
Jul 19 Javascript
javascript与CSS复习(三)
Jun 29 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
浅谈Javascript 数组与字典
Jan 29 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
JS前端笔试题分析
Dec 19 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
详解Angular2响应式表单
Jun 14 Javascript
react中props 的使用及进行限制的方法
Apr 28 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中防止SQL注入的最佳解决方法
2013/04/25 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
php输入数据统一类实例
2015/02/23 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
Javascript----文件操作
2007/01/18 Javascript
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
基于cookie实现zTree树刷新后展开状态不变
2017/02/28 Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
2017/07/10 Javascript
vue中使用better-scroll实现滑动效果及注意事项
2018/11/15 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
python操作MySQL数据库的方法分享
2012/05/29 Python
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
用Python进行行为驱动开发的入门教程
2015/04/23 Python
python如何将图片转换为字符图片
2020/08/19 Python
pandas进行数据的交集与并集方式的数据合并方法
2018/06/27 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
英国标准协会商店:BSI Shop
2019/02/25 全球购物
普通院校学生的自荐信
2013/11/27 职场文书
个人自我鉴定写法
2013/11/30 职场文书
致共产党员倡议书
2014/04/16 职场文书
外联部演讲稿
2014/05/24 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
JavaScript实现简单拖拽效果
2021/09/15 Javascript