vue上传文件到UCloud

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

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

vue上传文件到UCloud相关推荐

Vue上传文件 iview Upload UI 组件上传组件
Vue上传文件 input支持上传文件定义type类型,隐藏样式第三定义change事件拿到file 的相关信息,accept限制支持的文件类型然后给button增加点击事件 template部 ...
vue 上传文件和下载文件
Vue上传文件,不必使用什么element 的uplaod, 也不用什么npm上找的个人写的包,就用原生的Vue加axios就行了, 废话不多说,直接上代码: html: <input type ...
vue 上传文件和下载文件
vue 上传文件和下载文件 1. 上传文件 2. 下载文件 1. 上传文件上传文件我所使用的组件是element ui 的 el-upload,我一共进行了如下两步,第一步:修改样式,因为el-up ...
Vue上传文件操作（没有CV,认真看）
项目场景: 通过vue上传文件基本操作问题描述: 使用html上传文件时,很容易理解,那么vue文件上传呢?我们学了vue不可能还往里面写原生html的内容吧! 先放代码再解释: <templ ...
vue上传文件到php,vue+axios+php如何实现上传文件功能？,formdata上传文件附加参数...
vue+axios+php如何实现上传文件功能?Vue Axios PHP如何实现上传文件的功能?, 推荐:<PHP视频教程> 当我们提交表单时,我们经常会遇到一些表单提交要求.vue的a ...
vue 上传文件_前后端分离项目，如何优雅实现文件存储！
在上一节中我们讲到了使用MinIO来自建对象存储服务,这次我们来讲下MinIO如何结合SpringBoot和Vue来实现文件存储. 学前准备学习本文需要一些MinIO的基础知识,还不了解的小伙伴可以 ...
vue前端实现上传文件,vue 上传文件
以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传 ...
SpringBoot+Vue上传文件
最近在研究SpringBoot+Vue的文件上传,踩了不少坑.现在将正确的文件上传流程分享一下. 一.前端采用ElementUI组件前端页面完整代码: <template><el- ...
Java上传文件到ucloud对象存储上
使用uclpud对象存储存储文件,比如excel.pdf.png等,这里讲述一下完整的一套使用流程. 官方文档说明:https://github.com/ucloud/ufile-sdk-java 首 ...

vue上传文件到UCloud

vue上传文件到UCloud相关推荐

最新文章

热门文章