使用vue框架直接上传文件到七牛云的过程

前段时间刚好做到这个需求在这里记录一下希望能帮助到大家！
首先可以先看看七牛云的开发者中心：七牛云开发中心
我这里是使用vue3.x+ts框架开发的

按照文档所说我们需要先安装一下七牛云的SDK

npm install qiniu-js

然后在页面上引入：

const qiniu = require('qiniu-js')
// or
import * as qiniu from 'qiniu-js'

使用的是antd的上传组件：（我给封装起来了：UploadDragger）

    
     

       确定
       取消
     

UploadDragger组件：

回到主页面开始调事件：
computeMD5()方法的使用查看：文件上传md5计算

setup(){
	const state = reactive({
		// 上传参数
	      ShowUpload:false,
	      FileObj:[], // 存储上传的文件
	      uploadTimers: new Date().getTime(),// 刷新避免存在缓存
	}）
	/**
	  * 上传获取文件事件
	  * @res 上传的文件数据
	 * */ 
    const onChangUploadDragger = (res:any) =>{
      // console.log('父组件调用打印：')
      state.FileObj = computeMD5(res.fileList)
      // console.log(state.FileObj)
    };
	
	/**
    * 确认上传事件
    * @param ShowUpload 隐藏上传弹窗
    * */ 
    const ConfiromUpload = ()=>{
      if(state.FileObj.namelist.length == 0){
        proxy.$message.error('请先上传文件再进行确认！')
        return
      }
      state.ShowUpload = false // 关闭弹窗
      state.FileObj.namelist.forEach((item:any, index: any)=>{
        let size = state.FileObj.fileSizelist[index]
        let md5 = state.FileObj.md5list[index]
        let params = {
          fileName: item,
          fileSize: size,
          fileMd5: md5
        }
        let file = state.FileObj.Filelist[index] // 获取文件流
        SaveCommitUpload(params, file) // 写入提交文件上传请求事件；
      })
    };

    /**
     * 写入提交文件上传请求事件
     *@params 请求参数
     *@file 文件流数据
     * */ 
    const SaveCommitUpload = (params: any, file: any) =>{
      $http.getCommitUpload(params).then((res) => {  // 请求后端返回的七牛云token和其他参数
        	UploadFilesQiniuCloud(file, res.config); //上传文件到七牛云事件
        }
        
      }).catch((err) => {})
    };

    /**
     * 上传文件到七牛云事件
     *@file 文件流数据
     *@res 回调返回的文件上传数据
     *@Callback 请求成功后请求的文件上传结果事件
     * */ 
    const UploadFilesQiniuCloud = (file:any, res:any) =>{
      // console.log(file)
      // console.log(res)
      // return
      const key = res.key // 上传文件名
      const token = res.tempToken // 七牛云token
      const observer = {
        next: (response: any) => {
          console.log('上传进度'+Math.floor(response.total.percent)+'%')
          // console.log(response)
        },
        error: (err: any) => {
          // 失败
          proxy.$message.error('上传失败：' + err.message)
          console.log(err)
        },
        complete: (response:any) => {
          // 成功回调
          console.log(response)
        }
      }
      const putExtra: Object = {
        fname: file.name,   //上传文件名称
        params: {},
        mimeType: file.type,  // 文件类型
        // mimeType: ['image/png', 'image/jpeg', 'image/gif']
      }
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2, // 所在地域 这个可以问问后端域名所属区域（我这个是华南）
        chunkSize: res.config.chunkSize // 这个是切片大小，一般默认是4
      }
      const observable = qiniu.upload(file, key, token, putExtra, config)
      observable.subscribe(observer) // 上传开始
    };

	return {
	...toRefs(state),
	onChangUploadDragger,
	ConfiromUpload,
	}
}

至此七牛云的上传就完成了，需要注意的七牛云的token是从后端获取的，前端拿着token才能去访问七牛云并将文件上传上去；
代码写的比较冗余，请多多见谅。主要是为自己记录的哈