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 ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
Jan 20 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
类之Prototype.js学习
2007/06/13 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
js中!和!!的区别与用法
2020/05/09 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
抽象方法、抽象类怎样声明
2014/10/25 面试题
Java程序员面试题
2013/07/15 面试题
交通事故协议书范文
2014/04/16 职场文书
终止合同协议书
2014/04/17 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
解除同居协议书
2015/01/29 职场文书
出国留学英文自荐信
2015/03/25 职场文书
诚实守信主题班会
2015/08/13 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python
MySQL系列之十一 日志记录
2021/07/02 MySQL
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技