碧羽墨轩小程序发布了,扫码进来看看吧^_^
小程序码

vue+七牛云如何上传文件和视频( 支持断点续传)

碧羽墨轩 2021-11-11【学无止境】266人已围观

简介 七牛云上传当然必须保证token的有效,所有我们需要编写后端服务来实现token获取,这里简单展示一下代码配置

1.获取七牛的qiniu.min.js

使用 NPM 安装
npm install qiniu-js
const qiniu = require(‘qiniu-js’)
// or
import * as qiniu from ‘qiniu-js’

通过源码编译
git clone git@github.com:qiniu/js-sdk.git,进入项目根目录执行 npm install ,执行 npm run build,即可在dist 目录生成 qiniu.min.js。

2.前端源码

<template>
  <div class="upload">
    <a-button type="primary" @click="changeVideo">
      上传视频
    </a-button>
    已上传大小:{{ fileSize }}M
    <a-progress :percent="percent" status="active" />
    <input type="file" ref="videoInput" style="display: none;" @change="changeFile">
  </div>
</template>
<script>
require('./qiniu.min.js')
export default {
  name: 'UploadVideo',
  components: {
  },
  data () {
    return {
      upToken: null,
      fileSize: 0,
      percent: 0
    }
  },
  methods: {
    changeVideo () {
      this.$refs.videoInput.dispatchEvent(new MouseEvent('click'))
    },
    changeFile (e) {
      let file = e.target.files[0] // 对象,上传的文件
      if (file.size > 50000000) {
        this.$message.error(`文件超过50M,无法上传!`)
        return
      }
      if (file.type !== 'video/mp4') {
        this.$message.error(`请上传mp4格式的视频文件!`)
        return
      }
      let key = Math.floor(Math.random() * 1000000000000) + '.' + file.name.substring(file.name.lastIndexOf('.') + 1) // 文件资源名
      /*
      * config.useCdnDomain: 是否使用 cdn 加速域名,true or false,默认为 false。
      * config.disableStatisticsReport: 是否禁用日志报告,为布尔值,默认为false。
      * config.region: 选择上传域名区域;当为 null 或 undefined 时,自动分析上传域名区域
      * config.retryCount: 上传自动重试次数(整体重试次数);默认3次(即上传失败后最多重试两次);
      * config.concurrentRequestLimit: 分片上传的并发请求量,number,默认为3;
      * config.checkByMD5: 是否开启 MD5 校验,在断点续传时校验分片,默认为 false,不开启。
      */
      let qiniu = global.qiniu
      let config = {
        useCdnDomain: true
      }

      /*
      * fname: string,文件原文件名.
      * params: object,用来放置自定义变量;
      * mimeType: null || array,用来限制上传文件类型,为 null 时表示不对文件类型限制;
      * 限制类型放到数组里: ["image/png", "image/jpeg", "image/gif"]
      */
      let putExtra = {
        fname: file.name,
        params: {},
        mimeType: ['video/mp4']
      }
      let that = this
      let observe = {
        next (res) {
          console.log('已上传大小,单位为字节:' + res.total.loaded)
          console.log('本次上传的总量控制信息,单位为字节:' + res.total.size)
          console.log('当前上传进度,范围:0~100:' + res.total.percent)
          if ((res.total.loaded / 1000000) > that.fileSize) {
            that.fileSize = res.total.loaded / 1000000
          }
          if (res.total.percent > 0 && parseInt(res.total.percent) > that.percent) {
            that.percent = parseInt(res.total.percent)
          }
        },
        error (err) {
          console.log(err.code)
          console.log(err.message)
          console.log(err.isRequestError)
          console.log(err.reqId)
        },
        complete (res) {
        // 完成后的操作
        // 上传成功以后会返回key 和 hash  key就是文件名了!
          console.log(res)
        }
      }
      // 开始上传  token 需要找后端获取(单独的方法)
      let observable = qiniu.upload(file, key, this.upToken, putExtra, config)
      observable.subscribe(observe)
    }
  },
  mounted () {
    this.$api.join.getUpToken().then(res => {
      if (res.status === 0) {
        this.upToken = res.data.upToken
      }
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>
<style lang="scss" scoped>

</style>

3.后端获取token源码

Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);

文章评论
总共 0 条评论
这篇文章还没有收到评论,赶紧来抢沙发吧~