vue使用Element el-upload 组件踩坑记
作者:奥特曼 发布时间:2023-07-02 16:32:17
标签:vue,Element,el-upload,组件
一、基本使用
最近研究了一下 el-upload组件 踩了一些小坑 写起来大家学习一下
很经常的一件事情 经常会去直接拷贝 element的的组件去使用 但是用到上传组件时 就会遇到坑了
如果你直接去使用upload 你肯定会遇见这个错误
而且 上传的图片 可能会突然消失 这时候如果你没有接口 你是完全不知道为什么移除的 所以 无接口时 只能去猜测是不是因为跨域报错 导致图片消失
最终去拿公司的地址调完接口,答案是对的 action="https://jsonplaceholder.typicode.com/posts/" 这是element中的action参数 用html 时 他会去调用ajax 使同源策略不同导致报错。
一般呢公司都会提供一个 转图片为url格式的地址链接 你只需要去调用它 保存下来就好了, 但是可能会遇到需要token 权限 ,这时候很少去做的事情来了,一般没有去直接通过组件带token,所以要通过 el-upload组件去携带token
<el-upload
action="https://xxxx地址"
:headers="importHeaders"
>
</el-upload>
import {getToken} from '@/utils/token'
data() {
return {
importHeaders: {token: getToken()},
};
},
二、图片数量控制
<el-upload
action="https://security.brofirst.cn/api/common/upload"
:headers="importHeaders"
:limit="limit"
:on-exceed="masterFileMax"
>
<i class="el-icon-plus"></i>
</el-upload>
// 最多上传几张图片
masterFileMax(files, fileList) {
console.log(files, fileList);
this.$message.warning(`请最多上传 ${this.limit} 个文件。`);
},
三、图片格式限制/可以选中多张图片
<el-upload
accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg"
multiple
>
<i class="el-icon-plus"></i>
</el-upload>
例子
<el-upload
action="https://xxxx"
:headers="importHeaders"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-success="handleAvatarSuccess"
:limit="limit"
:on-exceed="masterFileMax"
accept=".JPG, .PNG, .JPEG,.jpg, .png, .jpeg"
multiple
>
<i class="el-icon-plus"></i>
</el-upload>
<script>
import {getToken} from '@/utils/token'
export default {
name:'feedback',
data() {
return {
importHeaders: {token: getToken()},
images:[],
limit:9
};
},
methods: {
//删除图片
handleRemove(file, fileList) {
const idx= this.images.findIndex(it=>it===file.response.data.fullurl)
this.images.splice(idx,1)
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
// 上传成功后的数据
handleAvatarSuccess(response, file, fileList){
console.log(response, file, fileList);
if(response.code===1){
this.images.push(response.data.fullurl)
}
},
// 最多上传几张图片
masterFileMax(files, fileList) {
console.log(files, fileList);
this.$message.warning(`请最多上传 ${this.limit} 个文件。`);
}
}
};
</script>
补充:在vue项目中使用element-ui的Upload上传组件
<el-upload
v-else
class='ensure ensureButt'
:action="importFileUrl"
:data="upLoadData"
name="importfile"
:onError="uploadError"
:onSuccess="uploadSuccess"
:beforeUpload="beforeAvatarUpload"
>
<el-button size="small" type="primary">确定</el-button>
其中importFileUrl是后台接口,upLoadData是上传文件时要上传的额外参数,uploadError是上传文件失败时的回掉函数,uploadSuccess是文件上传成功时的回掉函数,beforeAvatarUpload是在上传文件之前调用的函数,我们可以在这里进行文件类型的判断。
data () {
importFileUrl: 'http:dtc.com/cpy/add',
upLoadData: {
cpyId: '123456',
occurTime: '2017-08'
}
},
methods: {
// 上传成功后的回调
uploadSuccess (response, file, fileList) {
console.log('上传文件', response)
},
// 上传错误
uploadError (response, file, fileList) {
console.log('上传失败,请重试!')
},
// 上传前对文件的大小的判断
beforeAvatarUpload (file) {
const extension = file.name.split('.')[1] === 'xls'
const extension2 = file.name.split('.')[1] === 'xlsx'
const extension3 = file.name.split('.')[1] === 'doc'
const extension4 = file.name.split('.')[1] === 'docx'
const isLt2M = file.size / 1024 / 1024 < 10
if (!extension && !extension2 && !extension3 && !extension4) {
console.log('上传模板只能是 xls、xlsx、doc、docx 格式!')
}
if (!isLt2M) {
console.log('上传模板大小不能超过 10MB!')
}
return extension || extension2 || extension3 || extension4 && isLt2M
}
}
来源:https://blog.csdn.net/m0_46846526/article/details/120555641
0
投稿
猜你喜欢
- 要想在不宽裕的页面展现丰富的内容,现在通用的做法使用tab,在一块区域通过tab切换来更换该区域的内容。这篇文章分析了tab设计很在理,今天
- 简介在SQL SERVER中,数据库在硬盘上的存储方式和普通文件在Windows中的存储方式没有什么不同,仅仅是几个文件而已.SQL SER
- 序言作为当代新青年,应该多少会点短视频制作吧?哈哈,那当代自媒体创作者好了~制作视频的时候,多少需要一些搞怪的声音?或者奇怪的声音?音乐等等
- Transact-SQL中的存储过程,非常类似于Java语言中的方法,它可以重复调用。当存储过程执行一次后,可以将语句缓存中,这样下次执行的
- 好久没有更新过PyQt5相关的专题了,今天正好有空就做一个文件、文件内容检索的小工具。目的是为了能够很快的完成的在任意磁盘路径下找到我们需要
- 如何制作一个倒计时的程序? 见下:<%CountdownDate = #1/1
- <% dim conn,mdbfile mdbfile=server.mappath("数据库名称.mdb") s
- import sysfrom PyQt5 import QtWidgetsfrom PyQt5.QtWidgets import QMain
- 基本代码from redis import *if __name__ == '__main__': sr = StrictR
- 最后罗嗦一句,本人录入这篇文章用的机器上没有 ASP 环境,所以提供的代码未能进行测试,对这一点本人深表歉意。如果大家发现了代码中的任何问题
- 问题我们使用anoconda创建envs环境下的Tensorflow-gpu版的,但是当我们在Pycharm设置里的工程中安装Keras后,
- 一旦被黑客获取到webshell,黑客就知道了你的sqlserver管理员密码,如果sqlserver再没有经过安全设置那么黑客很容易就提权
- NLTK 是使用 Python 教学以及实践计算语言学的极好工具。此外,计算语言学与人工 智能、语言/专门语言识别、翻译以及语法检查等领域关
- CONVERT函数用于将值转换为指定的数据类型或字符集1.转换指定字符集CONVERT函数用于将字符串expr的字符集变成transcodi
- 关于mysql的读写分离架构有很多,百度的话几乎都是用mysql_proxy实现的。由于proxy是基于lua脚本语言实现的,所以网上不少网
- 主要实现的部分是利用NameGeneratorType读入系列图像,见头文件#include "itkNumericSeriesF
- 使用Django意味着后台框架的几乎所有内容都会和Django产生互动,排除功能全部手撸的情况.Django 后台admin有大量的属性和方
- 有时候会出现索引问题,显示scanning files to index解决方法:in pycharm, go to the "F
- 一、实验目的熟练掌握pandas中的groupby操作二、实验原理groupby(by=None, axis=0, level=None,
- 关于缓存剩下的问题是数据的隐私性以及在级联缓存中数据应该在何处储存的问题。通常用户将会面对两种缓存: 他或她自己的浏览器缓存(私有缓存)以及