技术标签: 前端开发 vue elementui vue.js javascript element
目录
在element ui中Upload 上传是通过action填写的api,选择图片后自动发起上传请求的。
1、在开发中其实根本用不到action,api都是放在统一文件下管理的,并且有些上传请求是需要做一些请求前的处理的,比如携带token之类的,设置请求头之类的。
2、在实际开发中,很少自动上传的,基本上都是选择图片或文件后,在点击提交才发起上传请求的。
1、自定义上传方法体(api做到统一管理),
2、选择图片(此时可看的预览图),点击确定后才发起上传请求。
1、action的提交地址填空即可,这个是必写属性,删除是会报错的;
2、show-file-list 是否显示已上传文件列表;
3、multiple 是否支持多选文件;
4、http-request="importFile" 覆盖默认的(action)上传行为,自定义上传的实现;
5、on-change="onChange" 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用,在这里我们可以做一些上传前的文件类型或大小的限制;
6、accept 接受上传的文件类型(thumbnail-mode 模式下此参数无效)
7、dataFormSubmit() 这个是确定发起请求的请求方法,在js部分会发出来;
<el-upload
class="avatar-uploader"
action=""
ref="upload"
:show-file-list="false"
list-type="picture"
:multiple="false"
:http-request="importFile"
:on-change="onChange"
accept=".jpg,.jpeg,.png,gif,JPG,JPEG,PNG,GIF">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
<el-button size="mini" type="primary" @click="dataFormSubmit()">确 定</el-button>
//选择文件时触发
onChange(file) {
this.imageUrl = URL.createObjectURL(file.raw);
// 这里做一些文件控制,注意:就算一次选取多个文件,这里依旧会执行多次
let typeArray = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']
let isJPG = typeArray.indexOf(file.raw.type)
if (isJPG === -1) {
this.$message.error('上传头像图片只能是 jpg、jpeg、png或gif 格式!!!')
}
this.fileList = file;
// console.log(file)
},
//自定义的上传方法用于覆盖自带的action上传,在这里我们只拿到要上传的文件,不提交
importFile() {
this.formData = new FormData()
this.formData.append('file', this.fileList.raw, 'yingji')
},
//点击确定发起的提交
dataFormSubmit(id) {
if (this.fileList!=null) {
//PostYingji api统一文件中封装好的请求
PostYingji(this.formData).then(data => {
// console.log(data)
if (data && data.status === 200) {
this.$message({
message: '上传文件成功',
type: 'success',
duration: 1500,
onClose: () => {
this.fileList = null
}
})
// console.log(data.data.data.yingji)
this.ruleForm.logoUrl = data.data.data.yingji;
this.fileList = null;
if (id == 1) {
this.updateBeOnDuty();
} else {
this.AddBeOnDuty()
}
} else {
this.$message.error(data.data.msg)
}
}).catch((err) => {
console.log(err)
this.$message.error('上传文件异常')
})
} else {
this.$message.error('请先选取上传文件')
}
},
封装好的api
export function PostYingji(data = {}) {
return service({
url: '/api-minio-file/file/fileUpload/dan/yingji',
method: 'post',
headers: {
'Content-Type': 'multipart/form-data', //设置请求头请求格式form
},
data,
});
}
注意:这里的api封装是根据你们自己封装的axios来配置
文章浏览阅读119次。该楼层疑似违规已被系统折叠隐藏此楼查看此楼/***Getaparametervalue**@paramkeyString*@paramdefString*@returnString*/publicStringgetParameter(Stringkey,Stringdef){returnisStandalone?System.getProperty(ke..._java http隧道
文章浏览阅读913次。IP主机名备注192.168.117.14keepalived-master主节点192.168.117.15keepalived-slaver备节点192.168.117.100VIP1.主备节点均安装keepalived# yum install -y keepalived httpd2.主备节点均修改keepalived日志存放路径..._keepalived sendmail
文章浏览阅读469次。--==========================================--SPFILE错误导致数据库无法启动(ORA-01565)--========================================== SPFILE错误导致数据库无法启动 SQL> startup ORA-01078: failurein proce_ora01565 ora27046
文章浏览阅读6.1k次,点赞2次,收藏54次。功能测试基础知识总结_功能测试
文章浏览阅读3.2k次,点赞3次,收藏2次。pg 中文首字母排序_pg中文排序
文章浏览阅读3.1w次,点赞23次,收藏109次。本文主要讲解CONVERT函数_mysql convert
文章浏览阅读8.6k次,点赞2次,收藏2次。HTML5 的视频播放事件想必大家已经期待很久了吧,在HTML4.1、4.0之前我们如果在网页上播放视频无外乎两种方法: 第一种:安装FLASH插件或者微软发布的插件 第二种:在本地安装播放器,在线播放组件之类的 因为并不是所有的浏览器都安装了FLASH插件,就算安装也不一定所有的都能安装成功。像苹果系统就是默认禁用FLASH的,安卓虽然一开始的时候支持FLASH,但是在安卓4.0以后也开始不_微信开发者工具视频快进
文章浏览阅读5.4k次,点赞3次,收藏4次。在使用redis的过程常见错误总结1.JedisConnectionException Connection Reset参考这边文章:Connection reset原因分析和解决方案https://blog.csdn.net/cwclw/article/details/527971311.1问题描述Exception in thread "main" redis.clients...._jedisconnectionexception: java.net.socketexception: connection reset
文章浏览阅读8.3k次,点赞8次,收藏42次。目录1.Lua垃圾回收算法原理简述2.Lua垃圾回收中的三种颜色3.Lua垃圾回收详细过程4.步骤源码详解4.1新建对象阶段4.2触发条件4.3 GC函数状态机4.4标记阶段4.5清除阶段5.总结参考资料lua垃圾回收(Garbage Collect)是lua中一个比较重要的部分。由于lua源码版本变迁,目前大多数有关这个方面的文章都还是基于lua5.1版本,有一定的滞后性。因此本文通过参考当前..._lua5.3 gc
文章浏览阅读511次。最近家中的潮人,老妈闲着没事干,开始学玩电脑,引起他的各种好奇心。如看看新闻,上上微信或做做其他的事情。但意料之中的是电脑上会莫名出现各种问题?不翼而飞的图标?照片又不见了?文件被删了,卡机或者黑屏,无声音了,等等问题。常常让她束手无策,求助于我,可惜在电话中说不清,往往只能苦等我回家后才能解决,那种开心乐趣一下子消失了。想想,这样也不是办法啊, 于是,我潜心寻找了两款优秀的远程控制软件。两款软件...
文章浏览阅读1.8k次。二.初始化工作空间三.设置下载地址四.下载功能包此处可能会报错,请看:rosdep update遇到ERROR: error loading sources list: The read operation timed out问题_DD᭄ꦿng的博客-程序员宅基地接下来一次安装所有功能包,注意对应ROS版本 五.编译功能包isolated:单独编译各个功能包,每个功能包之间不产生依赖。编译过程时间比较长,可能需要几分钟时间。此处可能会报错:缺少absl依赖包_ros18.04 安装ca
文章浏览阅读4.1k次,点赞3次,收藏7次。Haobor2.2.1配置(trivy扫描器、镜像签名)docker-compose下载https://github.com/docker/compose/releases安装cp docker-compose /usr/local/binchmod +x /usr/local/bin/docker-composeharbor下载https://github.com/goharbor/harbor/releases解压tar xf xxx.tgx配置harbor根下建立:mkd_init error: db error: failed to download vulnerability db: database download