Vue视频图片的在线存储仓库【七牛云】的使用

概要

七牛云的使用
官网：点击跳转

引入七牛云的依赖

npm install qiniu-js

配置七牛云

import Vant from 'vant';
Vue.prototype.$qiniu = qiniu

七牛云的使用

  const that = this
        //七牛云配置项②
        const observer = {
   
          next(res) {
   
            // 用于展示上传进度
            console.log("七牛运next", res)
          },
          error(err) {
   
            meassageError("上传失败")
            console.log("七牛运next", err)
          },

          complete(res) {
   
            lod.close()
            console.log("七牛云complete", res)
            meassageSuccess("上传成功")
            that.userInfo.videoUrl = "https://file.sycup.top/" + res.keyvideoUrl
            that.userInfo.fileVideo = res.hash//保存hash值
          }
        }
        //七牛云配置项①
        const config = {
   
          useCdnDomain: true,
          region: null,    // 根据地区不同，官网有不同的配置
          concurrentRequestLimit: 1000,
        }
        //设置文件的配置③
        const putExtra = {
   
          fname: "",
          params: {
   },
          mimeType: null
        };
        const key = "vod/" + this.userInfo.id + "/" + file.name  //上传文件加入用户id前缀
        getUpToken().then(res => {
   
          if (res.code === 200) {
   
            const token = res.data
            const observable = this.$qiniu.upload(file, key, token, putExtra, config)
            const subscription = observable.subscribe(observer) // 上传开始
          }
        })

小结

如果小编的文章对你有所帮助的话，帮忙一键三连续，点赞、关注、收藏，谢谢。