借助上传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上传文件,并监听更新上传进度的更多相关文章

  1. 基于element UI 的上传插件

    为了不再重复的上传文件,做了一个统一选择文件和上传文件的 基于 element UI :http://element-cn.eleme.io 前端实现文件下载和拖拽上传 演示 用法 <uploa ...

  2. 七牛云存储 qiniu 域名 回收 文件上传 备份 下载 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  3. 基于element ui的图片预览插件

    写插件很简单,满足两个条件即可,一.基本的逻辑思路,二.熟悉插件语法要求.本次Vue插件也比较简单,点击“查看图片”用轮播的方式限制用户上传的图片,如图: 项目采用的是vue-element-admi ...

  4. vue基于 element ui 的按钮点击节流

    vue的按钮点击节流 场景: 1.在实际使用中,当我们填写表单,点击按钮提交的时候,当接口没返回之前,迅速的点击几次,就会造成多次提交. 2.获取验证码,不频繁的获取. 3.弹幕不能频繁的发 基于这几 ...

  5. Android自定义之TextView跑马灯的监听

    TextView都有跑马灯的效果,如果说让你去监听跑马灯效果的执行,我觉得这个需求有点二了,但是也要实现. 思路: 1.自定义View  继承TextView   这种方法过于麻烦,只是监听一个跑马灯 ...

  6. android脚步---UI界面修改,关于activity中增加按钮和监听

    增加按钮和监听,这个和上个不同在于,它不是在一个dialog里面,而是从新写了一个activity,因此需要先找到这个activity的入口. case R.id.checkframe: if (mC ...

  7. 关于ue上传图片到七牛云设置key

    多图上传设置key: dialogs文件下面,image文件下面的image.html,链接webuploader.js,不链接webuploader.min.js webuploader.js里面 ...

  8. 基于element ui的级联选择器组件实现的分类后台接口

    今天在做资产管理系统的时候遇到一个分类的级联选择器,前端是用的element的组件,需要后台提供接口支持.     这个组件需要传入的数据结构大概是这样的,详细的可参考官方案例: [{ value: ...

  9. element ui change 传递带自定义参数

    @change="((val)=>{changeStatus(val, index)})" https://www.cnblogs.com/mmzuo-798/p/10438 ...

随机推荐

  1. nfs服务安装部署测试

    nfs:网络文件系统作用:某个文件或目录共享,使其它用户可以通过网络访问此共享目录或文件.***特别注意共享的目录权限1.使用nfs需要先安装 yum install -y nfs-utils rpc ...

  2. 阶段3 3.SpringMVC·_02.参数绑定及自定义类型转换_2 请求参数绑定实体类型

    参数封装到javaBean对象中 创建新的包domain.在下面新建Account 实现序列化 的接口,定义几个属性 生成get和set.还有toString的方法 表单 重新发布tomcat jav ...

  3. 基于 Node.js 的服务器自动化部署搭建实录

    基于 Node.js 的服务器自动化部署搭建实录 在服务器上安装 Node.js 编写拉取仓库.重启服务器脚本 配置 Github 仓库的 Webhook 设置 配置 Node.js 脚本 其他问题 ...

  4. 解决kubeadm部署kubernetes集群镜像问题

    kubeadm 是kubernetes 的集群安装工具,能够快速安装kubernetes 集群.kubeadm init 命令默认使用的docker镜像仓库为k8s.gcr.io,国内无法直接访问,需 ...

  5. 内容与org.apache.axis2.AxisFault: Connection refused: connect 没有太大的关系

    昨天下午  在SVN 检索下来项目   运行的时候遇到一个问题: 然后检查半天访问路径 再运行 居然又出现这个问题 然后又是一顿操作............. 网上找了半天方法 好多人说是  这样的  ...

  6. CTF—攻防练习之HTTP—PUT上传漏洞

    主机:192.168.32.152 靶机:192.168.32.159 中间件PUT漏洞 包括apache,tomcat,IIS等中间件设置支持的HTTP方法(get,post,head,delete ...

  7. Django开发—如何重置migration

    情景一:不需要原有的数据库数据 删除数据库所有的表删除项目的migration模块中的所有 文件,除了init.py 文件执行脚本 python3 manage.py makemigrations p ...

  8. lua基础学习(四)

    一,lua字符串   单引号间的一串字符. 双引号间的一串字符. [[和]]间的一串字符.   1.几个常用的转义字符 \b 退格 \f 换页 \n 换行 \r 回车 \t 跳到下一个tab位置 \0 ...

  9. 最长不下降/不上升子序列&&最长上升/下降子序列

    最长不下降/不上升子序列&&最长上升/下降子序列 struct cmp1{bool operator()(int a,int b){return a>b;}}; int main ...

  10. Linux命令基础#1

    系统基础 三大部件:CPU 内存 IO 1.CPU :运算器 控制器 存储器 2.内存:CPU的数据只能从内存读取,且内存数据有易失性(页面) 3.IO:控制总线 数据总线(一个IO) OS原理: O ...