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 错误处理的几种方法
Jun 13 Javascript
jquery插件制作教程 txtHover
Aug 17 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
May 19 Javascript
js友好的时间返回函数
Aug 24 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
javascript利用键盘控制小方块的移动
Apr 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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
python之语音识别speech模块
2020/09/09 Python
python 基于opencv实现图像增强
2020/12/23 Python
python源文件的字符编码知识点详解
2021/03/04 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
苹果音乐订阅:Apple Music
2018/08/02 全球购物
大学生简历求职信
2014/06/24 职场文书
商业用房租赁协议书
2014/10/13 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL