基于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)
      })
    }

原文地址:https://www.cnblogs.com/lanshengzhong/p/10308114.html

时间: 2024-10-07 20:25:13

基于element ui 实现七牛云自定义key上传文件,并监听更新上传进度的相关文章

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

vue的按钮点击节流 场景: 1.在实际使用中,当我们填写表单,点击按钮提交的时候,当接口没返回之前,迅速的点击几次,就会造成多次提交. 2.获取验证码,不频繁的获取. 3.弹幕不能频繁的发 基于这几个场景,对 element-ui 的按钮进行扩展 节流 主要使用到了 vue的 $listeners 和 $attrs $listeners:子组件里面,获取父组件对子组件 v-on 的所有监听事件 $attrs: 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 

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

TextView都有跑马灯的效果,如果说让你去监听跑马灯效果的执行,我觉得这个需求有点二了,但是也要实现. 思路: 1.自定义View  继承TextView   这种方法过于麻烦,只是监听一个跑马灯而已. 2.自定义SPan.简单好用,扩展TextView的功能. 关键代码如下: @Override public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, in

(七)android开发中两种方式监听短信的原理和实现

一.监听短信的两种方式的简介 Android程序开发中,有两种方式监听短信内容:一.接收系统的短信广播:二.应用观察者模式,监听短信数据库. 第一种方式接收系统的短信广播: A.这种方式只对新收到的短消息有效,运行代码,并不会读取收件箱中已读或未读的消息,只有当收到新来的短消息时,才会执行onReceive()方法. B.并且这个广播是有序广播,如果当别的程序先读取到了这个广播,然后拦截掉了个这个广播,你将接收不到.当然我们可以通过设置priority的数值,其实有时是不管用的,现在在一些定制的

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

增加按钮和监听,这个和上个不同在于,它不是在一个dialog里面,而是从新写了一个activity,因此需要先找到这个activity的入口. case R.id.checkframe: if (mCurrentModule instanceof PhotoModule) { PhotoUI ui = ((PhotoModule) mCurrentModule).getPhotoUIInstance(); if (ui != null) { PhotoFrameUpdateManager pho

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

今天在做资产管理系统的时候遇到一个分类的级联选择器,前端是用的element的组件,需要后台提供接口支持.     这个组件需要传入的数据结构大概是这样的,详细的可参考官方案例: [{ value: '1001', label: 'IT固定资产', children: [{ value: '100101', label: '服务器' }, { value: '100102', label: '笔记本' }, { value: '100103', label: '平板电脑' }, { value:

基于Element UI Cascader 级联选择器的中国省市区级联数据

安装 npm install element-china-area-data -save 在线演示:https://plortinus.github.io/element-china-area-data/index.html github:https://github.com/airyland/china-area-data 引入 import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, 

七牛云:ckeditor JS SDK 结合 C#实现多图片上传。

成功了,搞了2天.分享一下经验. 首先是把官方的那个例子下载下来,然后照如下的方式修改. 其中tempValue是一个全局变量. function savetoqiniu() { var uploader = Qiniu.uploader({ runtimes: "html5,flash,html4", browse_button: "setfile", save_key:false, //uptoken: qiniu_uptoken, get_new_uptoke

swift项目第七天:构建访客界面以及监听按钮点击

一:访客界面效果如图 二:代码 1:业务逻辑分析:1:由于用户未登录时要显示访客视图,要先进行判断用户是否登录,未登录则显示访客视图,登录则显示正常的登陆界面,由于要在四个子控制器界面的控制器中都要判断是否显示访客视图,同样的逻辑,所以考虑抽成父类,把判断是否显示访客视图的逻辑封装在父类中,让子类去继承.2:访客视图的界面如图:将访客视图封装在一个view中,view的界面相对固定,所以用xib搭建,首先将尽可能显示的控件全部封装在view的内部,再根据外界传入的model或是在封装类中定义方法

自定义ScrollView,实现ScrollView滑动监听并记录滑动位置。

Android自带的ScrollView对于滑动监听接口没有开放,然而在许多时候记录ScrollView的滑动位置,实现这个功能比较简单,自己实现一个ObserveScrollView类来继承ScrollView,然后重写里面的onScrollChanged(int l, int t, int oldl, int oldt)方法,本方法就是ScrollView的滑动监听,接着声明一个接口,在重写的方法里利用接口回调,将滑动的数据传出去. onScrollChanged(int l, int t,