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 相关文章推荐
jQuery 学习入门篇附实例代码
Mar 16 Javascript
Javascript中判断对象是否为空
Jun 10 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
详解Angular2中的编程对象Observable
Sep 17 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
详解React的回调渲染模式
Sep 10 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 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
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
重新认识php array_merge函数
2014/08/31 PHP
PHP中使用socket方式GET、POST数据实例
2015/04/02 PHP
php fread函数使用方法总结
2019/05/28 PHP
jquery对表单操作2
2011/04/06 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
js螺旋动画效果的具体实例
2013/11/15 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
总结python爬虫抓站的实用技巧
2016/08/09 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
英国男女奢华内衣和泳装购物网站:Figleaves
2017/01/28 全球购物
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
十八届三中全会感言
2014/03/10 职场文书
经典广告词大全
2014/03/14 职场文书
2014年幼儿园教研工作总结
2014/12/04 职场文书
升职自我推荐信范文
2015/03/25 职场文书
天气温馨提示语
2015/07/14 职场文书
Python天气语音播报小助手
2021/09/25 Python