vue上传文件到UCloud

64 篇文章 1 订阅
4 篇文章 0 订阅

最近公司在做一个关于短视频的项目,项目中涉及到视频文件的存储。以前是使用七牛云存储这次公司选用的是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.

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

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值