最近公司在做一个关于短视频的项目，项目中涉及到视频文件的存储。以前是使用七牛云存储这次公司选用的是UCloud，于是文档就看起来了
https://docs.ucloud.cn/storage_cdn/ufile/tools/sdk
上面是sdk的demo，目录结构如下

这里只要看v2就好了，因为v1在新的版本中有些地方已经不适用了。
其中我们需要的文件是v2/libs下除了base64.min.js这个文件之外的其他三个文件。
v2/js文件夹下的test.js是sdk的使用案例。
vue中使用
将需要的三个文件放到vue项目的pubilc文件夹下并在index.html文件中引入。

这里提一下为什么要在这里引用。首先这三个文件是es5的写的，直接引用到.vue需要修改源文件的export default，但是除了uploadC.js比较容易修改，另外两个文件有一定的困难。
上传文件
 

<input ref="file" type="file">
<button @click="upload">上传</button>


upload() {
                let data = {
                    file: this.$refs.file.files[0],
                    fileRename: this.$refs.file.files[0].name.split('.')[0]
                }
                let upload = new UCloudUFile(
                    'bucketName',//存储空间名称
                    'bucketUrl',//存储空间域名
                    'TOKEN_6cd82940-b90f-48c7-ac96-9ac5da6e72b0',//令牌公钥
                    '3607e1f9-4bfa-4f3e-93fb-f54398c08190',//令牌私钥
                    false,//是否服务端签名(直接输入服务端域名为是服务端签名)
                    'usql-org-2n4yfm-cn-sh2'//令牌配置的前缀
                )
                upload.sliceUpload(data,(res) => {
                    console.log(JSON.parse(res))
                },(err) => {
                    console.log(err)
                },(progress) => {
                    console.log(progress)
                })
            }

根据demo的上传方法需要data参数，UCloud存储空间的各种参数（都在UCloud的后台）。sliceUpload是upload上的一个分片传输的方法后面传入的三个方法分别是成功回调、失败回调、过程回调（传输完成的百分比）
下面是打印出来的成功回调和过程回调的结果。

成功和失败回调的数据都是json字符串需要用JSON.parse()转化成json对象。其中成功回调中的Key前面加上存储空间的域名就可以访问你上传好的这个视频。

扩展
分片上传是针对大文件进行的，还有表单上传和一些其他的上传方式。

问题

Access to XMLHttpRequest at 'http://newmjx.cn-sh2.ufileos.com/usql-org-2n4yfm-cn-sh2%2Fvideo3.mp4?uploads' from origin 'http://192.168.1.28:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'null' that is not equal to the supplied origin.

在本地调试的时候碰到了上传跨域的问题，这时候需要找客服让他们帮忙加上支持跨域传输