iView + 七牛云 上传组件封装

本贴最后更新于 1661 天前,其中的信息可能已经时移世易

新建一个页面模板

<!--
  搞什么事的: 七牛云组件的封装,接口获取token(地址什么的都是在后端写好返回在token里了)
  用法:vue组件
  params:
    acceptType(0,对应data里fileTypes数组的下标)
    :refid="'myfile'" (一个页面使用多个组件,用ref标示来区分)
    @next (向父组件传回调的next对象获取的参数)
    @complete (上传完成后返回对象(hash, key(七牛云路径))到父组件)
    @error (方法错误回调返回对象)

-->
<template>
  <div>
    <div class="buttonDiv">
      <Button
        icon="ios-cloud-upload-outline"
        @click="zh_uploadFile"
      >选择文件</Button>
      <input type="file" :ref="refid" @change="zh_uploadFile_change" style="display:none">
    </div>
<!--    进度条-->
    <div :ref="refid + 'ivu-progress'" class="ivu-progress ivu-progress-normal ivu-progress-show-info" style="display: none;max-width: 350px;">
      <div class="ivu-progress-outer">
        <div class="ivu-progress-inner">
          <div class="ivu-progress-bg" :ref="refid + 'ivu-progress-bg'" style="height: 2px"></div>
          <div class="ivu-progress-success-bg" :ref="refid + 'ivu-progress-success-bg'" style="width: 0%; height: 2px;"></div>
        </div>
      </div>
      <span class="ivu-progress-text">
        <span class="ivu-progress-text-inner" :ref="refid + 'ivu-progress-text-inner'"></span>
      </span>
    </div>
  </div>
</template>

<style lang="less">
  .buttonDiv {
    display: inline-block;
  }
  .progress {
    width: 400px;
    height: 2px;
  }
</style>

<script>
    import * as qiniu from 'qiniu-js'
    import getQnyToken from "../../assets/script/qiniuyun/getQnyToken";

    export default {
        name : 'qiNiuYun',
        props : {
            styles: Object,//样式
            refid:{//绑定的id
                type : String,
                default : ''
            },
            uploadType:{//上传类型 0:要素表    1:个人身份文件上传   2:证据文件上传
                type : String,
                default : ''
            },
            acceptType: {
                default: 0
            },
            path: ''  // 上传到七牛云到路径
        },
        data(){
            return {
                totalSize:0,//总量
                loaded:0,//已上传文件大小
                totalTime:0,//总用时/s
                speed:0,//当前速度
                lestTime:0,//剩余时间
                timmer:'',//定时器
                fileTypes: [
                    ['.jpg', '.png', '.jpeg', '.txt', '.xls', '.xlsx', '.doc', '.docx', '.word', '.pdf', '.ppt', '.pptx', '.wordx'],  // 对应上传文件类型 acceptType = 0
                ]
            }
        },
        methods: {
            //选择上传文件
            zh_uploadFile(){
                this.$refs[this.refid].click();
            },

            //选择文件后触发的事件
            zh_uploadFile_change(evfile){
                let typeFlag = false
                const that=this
                const file = evfile.target.files[0] //Blob 对象,上传的文件
                if (file) {
                    const fileTypes = this.fileTypes[this.acceptType]
                    const fileend = file.name.substring(file.name.lastIndexOf('.'))
                    for (let t of fileTypes) {
                        if (t === fileend) {
                            typeFlag = true
                            break
                        }
                    }
                } else {
                    this.$Message.error('取消上传!')
                    return false
                }
                if (typeFlag) {
                    //后端获取七牛token(//这里替换成给自己后端的token获取接口)
                    getQnyToken().then(res=>{
                        const uptoken = res
                        this.totalSize=file.size;
                        const key = this.path + this.getuuid()+'-'+file.name // 上传后文件资源名以设置的 key 为主,如果 key 为 null 或者 undefined,则文件资源名会以 hash 值作为资源名。
                        let config = {
                            useCdnDomain: true,   //表示是否使用 cdn 加速域名,为布尔值,true 表示使用,默认为 false。
                            region: qiniu.region.z2,     // 根据具体提示修改上传地区,当为 null 或 undefined 时,自动分析上传域名区域
                            concurrentRequestLimit: 7, //分片上传的并发请求量,number,默认为3
                        };

                        let putExtra = {
                            fname: "",  //文件原文件名
                            params: {}, //用来放置自定义变量
                            mimeType: null  //用来限制上传文件类型,为 null 时表示不对文件类型限制;限制类型放到数组里: ["image/png", "image/jpeg", "image/gif"]
                        };
                        this.observable = qiniu.upload(file, key, uptoken, putExtra, config)
                        //定时器用来统计上传时间
                        this.timmer=setInterval(() => {
                            //计时
                            that.totalTime+=1
                            //每秒统计一次速度(已上传大小/总耗时)
                            that.speed=that.loaded/that.totalTime
                            //计算剩余时间(总大小-已上传大小)/当前速度
                            that.lestTime=(that.totalSize-that.loaded)/that.speed
                        }, 1000);
                        this.subscription=this.observable.subscribe({
                            next: (result) => {
                                that.loaded=result.total.loaded
                                that.$emit('next',result,parseInt(this.lestTime)) // 可用来做进度条处理
                                // 百分比
                                let percent = result.total.percent.toFixed(0)
                                this.$refs[this.refid + 'ivu-progress'].style.display = 'block'
                                this.$refs[this.refid + 'ivu-progress-bg'].style.width = percent + '%'
                                this.$refs[this.refid + 'ivu-progress-text-inner'].innerHTML = percent + '%'
                                if (percent == '100') {
                                    this.$refs[this.refid + 'ivu-progress'].style.display = 'none'
                                }
                                // 主要用来展示进度
                                // this.$Notice.info({
                                //     title: "上传中,请稍后....",
                                //     duration: 0,
                                //     render: h => {
                                //         return h('span', [
                                //             h('div', {
                                //                 style: {
                                //                     color: "red",
                                //                 },
                                //             }, `上传过程请勿关闭浏览器或执行其他操作!`),
                                //             h('div', `进度${this.flieProgress}%,预计剩余${this.leastTime}`),
                                //         ])
                                //     }
                                // })
                            },
                            error: (errResult) => {
                                that.$emit('error',errResult)
                            },
                            complete: (result) => {
                                window.clearInterval(this.timmer)//清除计时
                                result.fileName = file.name
                                that.$emit('complete',result)
                            }
                        })
                        //清除文本值方便下次触发change
                        // this.$refs[this.refid].value = null
                    })
                } else {
                    this.$Message.error('指定文件格式错误,请重新上传')
                }
            },
            cancelUpload(){//取消上传
                window.clearInterval(this.timmer)//清除计时
                this.subscription.unsubscribe() // 上传取消
            },
            getuuid() {
                let s = []
                let hexDigits = "0123456789abcdef"
                for (let i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
                }
                s[14] = "4"  // bits 12-15 of the time_hi_and_version field to 0010
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
                s[8] = s[13] = s[18] = s[23] = "-"

                let uuid = s.join("")
                return uuid
            },
            quotePercent(num, total) {
                num = parseFloat(num);
                total = parseFloat(total)
                if (isNaN(num) || isNaN(total)) {
                    return '-'
                }
                return total <= 0 ? '0%' : (Math.round(num / total * 100) / 100.00)*100 + '%'
            },
            delFile(ref) {
                debugger
                this.$refs[ref].value = null
            }
        }
    }
</script>

创建一个 getQnyToken 文件,来获取七牛云的上传 token

import Axios from 'axios'

let api = process.env.baseUrl
let member_token
export default async function () {
  let store = $nuxt.$store
  // let route = $nuxt.$route
  if (process.browser) {
    member_token = JSON.parse(localStorage.getItem('memberToken'))
    // if (store.state.)
    let _token
    await Axios.get(api + '/api/qiniu/token/file?member_token=' + member_token)
      .then(res => {
        if (res.data.data) {
          _token = res.data.data.token
        }
      })
    return _token
  }
}

其他组件内调用:

<qi-niu-yun
                :acceptType=0
                :refid="'releaseTaskId'"
                :path="qnySaveUrl"
                v-show="qnyCallBackParam.documentName === null"
                ref="upload"
                @next="fileNext(arguments)"
                @complete="fileComplete"
                @error="fileError"/>

传入参数 acceptType 的值对应子组件(也就是封装的七牛云上传组件)里面 filleTypes 数组里面的下标

Props:

参数 说明 备注 类型
acceptType 对应子组件(也就是封装的七牛云上传组件)里面 filleTypes 数组里面的下标 int
refid 对应子组件的 ref,唯一性 如果一个页面有多个上传按钮,那么每个 refid 的值必须唯一 String
path 七牛云的上传路径 String

Callback Events:

事件名 说明 返回类型
@next 向父组件传回调的 next 对象获取的参数 Obj
@complete 上传完成后返回对象(hash, key(七牛云路径))到父组件 Obj
@error 方法错误回调返回对象 Obj
  • iView
    5 引用
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    27 引用 • 225 回帖 • 169 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    266 引用 • 665 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    729 引用 • 1327 回帖
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 5 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    69 引用 • 372 回帖
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 232 回帖 • 2 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 588 回帖
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖 • 1 关注
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 63 关注
  • danl
    132 关注
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 6 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 587 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 550 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 19 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 431 关注
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 816 回帖
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 167 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    266 引用 • 665 回帖
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖
  • 工具

    子曰:“工欲善其事,必先利其器。”

    286 引用 • 729 回帖
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    222 引用 • 473 回帖 • 1 关注
  • 导航

    各种网址链接、内容导航。

    40 引用 • 173 回帖
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    53 引用 • 37 回帖
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 721 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖 • 2 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注