vue中element 的upload组件发送请求给后端操作
更新时间：2020年09月07日 11:29:57 作者：瘦瘦的小芝芝
这篇文章主要介绍了vue中element 的upload组件发送请求给后端操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
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是我们可能上传多个 定义一个数组
2、在data中定义 uploadBase:{}
3、请求后台的导入接口 传给后台所需要的参数
以上这篇vue中element 的upload组件发送请求给后端操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue项目不能使用localhost访问的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
在Vue 3中,跨页面传值可以通过多种方式实现,具体选择哪种方法取决于应用的具体需求和页面间的关系,本文列举了几种常见的跨页面传值方法,感兴趣的同学跟着小编来看看吧2024-04-04
这篇文章主要介绍了vue中使用vant的Toast轻提示报错的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了简单设置el-date-picker的默认当前时间问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vue组件之间的通信方式有很多种,props/emit,event bus,vuex,provide/inject等,还有一种通信方式就是$attrs和$listeners,下面这篇文章主要给大家介绍了关于vue2.x中$attrs和$listeners的相关资料,需要的朋友可以参考下2022-03-03
vue3.0 router路由跳转传参问题(router.push)
这篇文章主要介绍了vue3.0 router路由跳转传参问题(router.push)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
解决Element-ui radio单选框label布尔/数值的一个坑
这篇文章主要介绍了解决Element-ui radio单选框label布尔/数值的一个坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了web前端vue实现插值文本和输出原始html，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了vue使用高德地图实现实时天气预报功能,根据定位功能，使用高德地图实现定位当前城市的天气预报功能，本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-05-05
这篇文章主要介绍了解决Vue 刷新页面导航显示高亮位置不对问题,本文图文实例相结合给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
最新评论