后台：七牛云上传图片，视频，文件

vue方式

1. 上传图片（通过base64进行上传图片）

<div  id="myDiv"></div>
  <script>
    let base64 = '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'
    function putb64() {
      var pic = base64;
      var url = "http://upload-z2.qiniup.com/putb64/1691"; //非华东空间需要根据注意事项 1 修改上传域名
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
          document.getElementById("myDiv").innerHTML = xhr.responseText;
        }
      }
      xhr.open("POST", url, true);
      xhr.setRequestHeader("Content-Type", "application/octet-stream");
      xhr.setRequestHeader("Authorization", "UpToken 6xFDwCr_0C-YDvNLcjuHSGM9G9AVe5DD5JcWOLME:ysk65ufYWCcQEtv8AqZo1R_1ljA=:eyJzY29wZSI6InRlc3QteHEwMDciLCJkZWFkbGluZSI6MTYyMDI0NDQxNX0=");
      xhr.send(pic);
    }
    putb64();
  </script>

2. 上传视频
   参考链接

<el-upload
    ref="upload"
    action="http://upload.qiniup.com"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    :auto-upload="true"
    :limit="1"
    :data="form"
>
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>

async beforeAvatarUpload(file) {
   const fileType = file.type
   const current = new Date().getTime()
   const key = `video_${current}` // key为上传后文件名 必填
   const isLt20M = file.size / 1024 / 1024 < 20 // 算出文件大小
   this.fileSize = file.size // 存储文件大小
   if (!isLt20M) { // 这里我们限制文件大小为20M
       this.$message.error('最大只能上传20M!')
       this.$ref.upload.abort()
       return isLt20M
   }
   if (fileType !== 'video/mp4') { // 限制文件类型
       this.$ref.upload.abort()
       this.$message.error('只能上传MP4格式视频!')
       return false
   }
   try {
       const token = await this.getPicToken()
       this.form = {
           key,
           token,
       }
       return true
   } catch (error) {
       return error
   }
},

js原生方式 (任意文件 video image txt等等)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="//unpkg.com/layui@2.6.4/dist/css/layui.css">
  <script src="//unpkg.com/layui@2.6.4/dist/layui.js"></script>
</head>

<body>
  <div id="container">
    <input type="file" onchange="upload(this)">
    <button class="layui-btn" type="button" id="startUpload">开始上传</button>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/qiniu-js/2.2.1/qiniu.min.js"></script>
  <!-- <script src="./js/qiniu.min.js"></script> -->
  <script>
    var files = ''
    var type = ''
    var fileName = ''
    function upload(obj) {

      files = obj.files[0];
      console.log(files)
      type = files.type
      console.log(type)
      fileName = files.name
    }
    let token = '6xFDwCr_0C-YDvNLcjuHSGM9G9AVe5DD5JcWOLME:Zg-KW8NSqb79XElKhZO_B4NcRWQ=:eyJzY29wZSI6InRlc3QteHEwMDciLCJkZWFkbGluZSI6MTYyMDU3NzYxOX0='

    document.getElementById('startUpload').onclick = function () {
      const observable = qiniu.upload(
        files, null,
        token
        , {
          fname: fileName,
          // mimeType: "text/plain",
          mimeType: type,
          customVars: { 'x:test': 'qiniu', bucket: 'test-xq007' },
          metadata: { 'x-qn-meta': 'qiniu', Authorization: 'Qiniu ' + token },
        }, {
        useCdnDomain: true,
        region: qiniu.region.z2
      })
      const subscription = observable.subscribe({
        next(res) {
          // ...
          console.log('next...', res)
        },
        error(err) {
          // ...
          console.log('error...', err)
        },
        complete(res) {
          // ...
          console.log('complete...', res)
        }
      })
    };
  </script>
</body>

</html>