基于element ui 实现七牛云自定义key上传文件,并监听更新上传进度
借助上传Upload 上传组件的 http-request 覆盖默认的上传行为,可以自定义上传的实现
<el-upload
multiple
ref="sliderUpload"
:data="uploadData"
:action="uploadData.url"
list-type="picture-card"
accept="image/png,image/jpeg,image/jpg"
:auto-upload="true"
:limit="numberLimit.slider"
:file-list="sliderList"
:http-request="sliderRequest"
:before-upload="beforeUpload"
:on-remove="sliderRemove"
:on-preview="picturePreview"
:on-error="uploadError"
:on-exceed="uploadLimit">
<i class="el-icon-plus"></i>
<div class="el-upload__tip" slot="tip">限上传9张轮播图</div>
</el-upload>
sliderRequest(upload) {
// 文件上传自行处理上传
// 创建FormData对象 添加相关上传参数
const formData = new FormData()
// 文件对象
formData.append('file', upload.file)
// key 文件名处理 images/时间戳_随机字符串.文件后缀
formData.append('key', `images/${new Date().getTime()}_${randomString()}.${upload.file.name.substring(upload.file.name.lastIndexOf('.') + 1)}`)
// token
formData.append('token', this.uploadData.token) // 上传文件
// onUploadProgress 查看axios文档 https://github.com/axios/axios
axios.post(this.uploadData.url, formData, {
onUploadProgress: (event) => {
// 监听上传进度
event.percent = event.loaded / event.total * 100
upload.onProgress(event)
}
}).then((response) => {
const res = response.data
if (res.code === 200) {
// 调用组件上传成功方法
upload.onSuccess()
// 轮播图上传成功 这里做相关逻辑this.$message.success('上传成功')
}
}).catch((err) => {
// 调用组件上传失败方法
upload.onError()
this.$message.error('上传失败,' + err)
})
}
基于element ui 实现七牛云自定义key上传文件,并监听更新上传进度的更多相关文章
- 基于element UI 的上传插件
为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法 <uploa ...
- 七牛云存储 qiniu 域名 回收 文件上传 备份 下载 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- 基于element ui的图片预览插件
写插件很简单,满足两个条件即可,一.基本的逻辑思路,二.熟悉插件语法要求.本次Vue插件也比较简单,点击“查看图片”用轮播的方式限制用户上传的图片,如图: 项目采用的是vue-element-admi ...
- vue基于 element ui 的按钮点击节流
vue的按钮点击节流 场景: 1.在实际使用中,当我们填写表单,点击按钮提交的时候,当接口没返回之前,迅速的点击几次,就会造成多次提交. 2.获取验证码,不频繁的获取. 3.弹幕不能频繁的发 基于这几 ...
- Android自定义之TextView跑马灯的监听
TextView都有跑马灯的效果,如果说让你去监听跑马灯效果的执行,我觉得这个需求有点二了,但是也要实现. 思路: 1.自定义View 继承TextView 这种方法过于麻烦,只是监听一个跑马灯 ...
- android脚步---UI界面修改,关于activity中增加按钮和监听
增加按钮和监听,这个和上个不同在于,它不是在一个dialog里面,而是从新写了一个activity,因此需要先找到这个activity的入口. case R.id.checkframe: if (mC ...
- 关于ue上传图片到七牛云设置key
多图上传设置key: dialogs文件下面,image文件下面的image.html,链接webuploader.js,不链接webuploader.min.js webuploader.js里面 ...
- 基于element ui的级联选择器组件实现的分类后台接口
今天在做资产管理系统的时候遇到一个分类的级联选择器,前端是用的element的组件,需要后台提供接口支持. 这个组件需要传入的数据结构大概是这样的,详细的可参考官方案例: [{ value: ...
- element ui change 传递带自定义参数
@change="((val)=>{changeStatus(val, index)})" https://www.cnblogs.com/mmzuo-798/p/10438 ...
随机推荐
- nfs服务安装部署测试
nfs:网络文件系统作用:某个文件或目录共享,使其它用户可以通过网络访问此共享目录或文件.***特别注意共享的目录权限1.使用nfs需要先安装 yum install -y nfs-utils rpc ...
- 阶段3 3.SpringMVC·_02.参数绑定及自定义类型转换_2 请求参数绑定实体类型
参数封装到javaBean对象中 创建新的包domain.在下面新建Account 实现序列化 的接口,定义几个属性 生成get和set.还有toString的方法 表单 重新发布tomcat jav ...
- 基于 Node.js 的服务器自动化部署搭建实录
基于 Node.js 的服务器自动化部署搭建实录 在服务器上安装 Node.js 编写拉取仓库.重启服务器脚本 配置 Github 仓库的 Webhook 设置 配置 Node.js 脚本 其他问题 ...
- 解决kubeadm部署kubernetes集群镜像问题
kubeadm 是kubernetes 的集群安装工具,能够快速安装kubernetes 集群.kubeadm init 命令默认使用的docker镜像仓库为k8s.gcr.io,国内无法直接访问,需 ...
- 内容与org.apache.axis2.AxisFault: Connection refused: connect 没有太大的关系
昨天下午 在SVN 检索下来项目 运行的时候遇到一个问题: 然后检查半天访问路径 再运行 居然又出现这个问题 然后又是一顿操作............. 网上找了半天方法 好多人说是 这样的 ...
- CTF—攻防练习之HTTP—PUT上传漏洞
主机:192.168.32.152 靶机:192.168.32.159 中间件PUT漏洞 包括apache,tomcat,IIS等中间件设置支持的HTTP方法(get,post,head,delete ...
- Django开发—如何重置migration
情景一:不需要原有的数据库数据 删除数据库所有的表删除项目的migration模块中的所有 文件,除了init.py 文件执行脚本 python3 manage.py makemigrations p ...
- lua基础学习(四)
一,lua字符串 单引号间的一串字符. 双引号间的一串字符. [[和]]间的一串字符. 1.几个常用的转义字符 \b 退格 \f 换页 \n 换行 \r 回车 \t 跳到下一个tab位置 \0 ...
- 最长不下降/不上升子序列&&最长上升/下降子序列
最长不下降/不上升子序列&&最长上升/下降子序列 struct cmp1{bool operator()(int a,int b){return a>b;}}; int main ...
- Linux命令基础#1
系统基础 三大部件:CPU 内存 IO 1.CPU :运算器 控制器 存储器 2.内存:CPU的数据只能从内存读取,且内存数据有易失性(页面) 3.IO:控制总线 数据总线(一个IO) OS原理: O ...