Vue使用element上传
<el-upload
action
v-if="IsUpload"
style="display:inline"
list-type="picture-card"
:on-remove="handleRemove"
:on-success="onSuccess"
:on-change="on_change"
:before-remove="before_remove"
:limit="1"
:before-upload="onBeforeUpload"
accept=".jpg, .png"
:http-request="uploadFile"
:on-exceed="Exceed"
:file-list="imgUrls"
>
<i class="el-icon-plus"></i>
<i
id="uploadImg"
style="position: absolute;top: 29%;left: 50%;transform: translateX(-50%);color: #F56C6C;font-size: 12px;display:none"
>请上传图片</i>
</el-upload>
// 上传之前的钩子
onBeforeUpload(file) {
// console.log(file)
const isJPG = file.type === "image/jpeg";
const isPNG = file.type === "image/png";
if (!isJPG && !isPNG) {
this.$message.error("上传图片只能是 JPG/PNG 格式!");
}
return isJPG || isPNG;
},
// 自定义上传文件
uploadFile(file) {
console.log(file);
let form = new FormData();
// 后端接受参数 ,可以接受多个参数
form.append("file", file.file);
this.$post(
"/admin/sys-file/uploadImg",
form,
res => { },
err => {
this.$message.error(err.msg);
throw err;
}
);
},
// 移出之前钩子
before_remove(a, b) {
console.log(a, b);
// console.log( b.findIndex(item => item.uid == a.uid))
this.count = b.findIndex(item => item.url == a.url);
},
Vue使用element上传的更多相关文章
- vue 阿里云上传组件
vue 阿里云上传组件 Vue.js上传图片到阿里云OSS存储 测试项目git地址 本测试项目启动方法 示例链接 组件配置项 实践解释 本文主要介绍如何 在vue项目中使用web 直传方式上传阿里云o ...
- vue中el-upload上传多图片且携带参数,批量而不是一张一张的解决方案
现在前端基本不是vue技术栈就是react技术栈. vue技术栈最常用的就是element-ui的ui框架了. 在项目中,我们经常会碰到这种需求:批量上传文件 element-ui 确实也为我们提供了 ...
- springboot+vue实现文件上传
https://blog.csdn.net/mqingo/article/details/84869841 技术: 后端:springboot 前端框架:vue 数据库:mysql pom.xml: ...
- 关于vue使用form上传文件
在vue中使用form表单上传文件文件的时候出现了一些问题,获取文件的时候一直返回null, 解决之后又出现发送到后台的file文件后台显示为空,解决源码 <template> <d ...
- vue element-ui 文件上传
<el-upload class="upload-demo" action="" :before-remove="beforeRemove&qu ...
- Vue实现用户自定义上传头像裁剪
使用技术: vue.js2.0.cropperjs.canvas <template> <div id="app"> <div id=&q ...
- vue 封装组件上传img
var _uploadTemplate = '<div>'+ '<input type="file" name="file" v-on:cha ...
- vue.js异步上传文件前后端代码
上传文件前端代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q ...
- element 上传组件 el-upload 的经验总结
前言 最近在做后台管理项目,采用的 vue-element-admin ,上传图片是一个很常用的功能,也遇到了很多问题,刚好趁此机会做一些总结. 初步总结下会提到的问题,目录如下: el-upload ...
随机推荐
- 你真的了解 volatile 关键字吗?
今天,让我们一起来探讨 Java 并发编程中的知识点:volatile 关键字 本文主要从以下三点讲解 volatile 关键字: volatile 关键字是什么? volatile 关键字能解决什么 ...
- FormData交互以及Node multiparty插件的使用
一.FormData FormData是ajax2.0里面添加的新特性. FormData的主要用途有两个: (1).将form表单元素的name与value进行组合,实现表单数据的序列化,从而减少表 ...
- python 线程、进程与协程
一.什么是线程?什么是进程? 第一,进程是一个实体.每一个进程都有它自己的地址空间,一般情况下,包括文本区域(text region).数据区域(data region)和堆栈(stack regio ...
- 处理echarts用到的数据格式。。。
1.需求将数据组装: 将typeNumMap中 键为 '1' 的放在数组series 索引为1的data数组中, 将'2'放在索引为2的data数组中,如果 typeNumMap 中没有 对应的 1, ...
- python变量和运算
本文收录在Python从入门到精通系列文章系列 1. 指令和程序 计算机的硬件系统通常由五大部件构成,包括:运算器.控制器.存储器.输入设备和输出设备. 其中,运算器和控制器放在一起就是我们通常所说的 ...
- [考试反思]1029csp-s模拟测试93:殇逝
并不是把它消成上三角矩阵 停止! 思考, 回顾. 疑惑? 遗忘… 一直只是在匆忙的赶进度,实际上的确是一点也不扎实. T1,裸的偏序,想了一个多小时什么也没想到,只打了$O(n^2)$ 难道之前学的就 ...
- 7.22 NOIP模拟7
又是炸掉的一次考试 T1.方程的解 本次考试最容易骗分的一道题,但是由于T2花的时间太多,我竟然连a+b=c都没判..暴力掉了40分. 首先a+b=c,只有一组解. 然后是a=1,b=1,答案是c-1 ...
- csp模拟69
考试一眼看出$T3$原题,但是没做过,心态爆炸. 然后去看$T1$,迷之认为它是矩阵快速幂?推了一个小时,发现在转移过程中方案数并不均匀分布,然后就挂了. 决定先去看T3,只会$O(n\sqrt{n} ...
- SP5150 JMFILTER - Junk-Mail Filte(并查集)
直秒并查集.这题的难点就在于怎么删点.如果要删的是叶节点,那还好,直接刨掉即可 如果是中间节点甚至是根节点,那就不好办了..... solution: 对于独立一个点,我可以用邻接表模拟,然后用并查集 ...
- Redis集群--Redis集群之哨兵模式
echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! 搭建R ...