The front-end implements uploading files to oss (Alibaba Cloud) for vue, react, and uni-app, and obtains the first frame of the video
The user obtains oss configuration information and uploads the file to Alibaba Cloud, which ensures security and reduces the burden on the server. Generally, many file resources are directly uploaded to the server, which will increase the burden on the server. At this time, you can choose to upload to oss. Lightweight applications can directly upload file resources to the server. Not much nonsense, let's start to summarize the journey of stepping on the pit that I uploaded to oss.
used in vue
1. The first step is to register an Aliyun account, Alibaba Cloud official website
2. Install the oss module: npm i ali-oss -D
3. The specific use in Vue is as follows
a. Import module: import OSS from 'ali-oss'
b. Define data in data
data(){
return{
video_url:'',
client:null,
}
}
c. Initialize the OSS object:
this.client = new OSS({
region: '',//地域（在创建 Bucket 的时候指定的中心位置），这里可能不知道具体地域怎么填其实就是 oss-cn-中心位置 ，例：region:'oss-cn-chengdu'，chengdu则是创建bucket是指定的位置成都。
accessKeyId: '', //阿里云产品的通用id
accessKeySecret: '',//密钥
bucket: '' //OSS 存储区域名
});
d. Define the method of uploading selected files to oss
uploadFile(event){
let file = event.target.files[0]
if(!(/^\S+\.mp4$/.test(file.name))){
return this.$message.error('请上传视频文件')
}
/**
* 文件的类型，判断是否是视频
*/
let param = new FormData()
param.append('file', file, file.name);
console.log('开始上传')
this.put(file.name,file)
},
e. Define the put method to upload to Alibaba Cloud
async put (name,file) { try { var fileName = new Date().getTime()+name; //object-name可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。 let result = await this.client.put(fileName, file); this.video_url=result.url;//返回的上传视频地址 //一下为生成图片处理的签名 URL t_1000表示第一秒视频图片，常用来作为视频封面图 const imgRes = this.video_url+'?x-oss-process=video/snapshot,t_1000,f_jpg,w_0,h_0,m_fast'; } catch (e) { console.log(e); } },Problems that may be encountered:
1. The cross-domain upload cannot be successful:
go to Alibaba Cloud to configure the domain name, and upload the server for verification
Used in uni-app (need to cooperate with the backend)
1. data defines data
data() { return { ossData:{ accessid: "", dir: "/uploads/202003/", expire: 1585653811, host: "", policy: "", signature: "" }, fileInfo:null, } },2. Define the method of selecting video files to upload
selVideo(type){ uni.chooseVideo({ count: 1, maxDuration:15, compressed:false, success: (res) => { if(parseFloat(res.duration)>=16){ return this.$toast('请选取小于15s的视频！') } let tempFilePath = res.tempFilePath; this.fileInfo=res; if(!this.fileInfo){ return } uni.showLoading({ title:'上传中...' }) this.getOssSign(res.tempFilePath) } }); },3. Define the method to obtain the oss configuration returned from the server
async getOssSign(path,type){ let [e, data] = await this.$api.getOssSign(); if (e) return if (data.errNum === 200) { this.ossData=data.result; let fileName=new Date().getTime()+'app'+this.fileInfo.tempFilePath.substr(this.fileInfo.tempFilePath.length-6,) uni.uploadFile({ url: this.ossData.host, //后台给的阿里云存储给的上传地址 filePath: path, fileType: 'video', name: 'file', formData: { key: fileName, //文件名 policy: this.ossData.policy, //后台获取超时时间 OSSAccessKeyId: this.ossData.accessid, //后台获取临时ID success_action_status: '200', //让服务端返回200,不然，默认会返回204 signature: this.ossData.signature //后台获取签名 }, success: (res) => { console.log(res,fileName); uni.hideLoading(); uni.showToast({ title: '上传成功', icon: 'success', duration: 1000 }); this.video=this.ossData.host+'/'+fileName; }, fail: (err) => { uni.hideLoading(); uni.showModal({ title: '上传失败', content: err.errMsg, showCancel: false }); }, complete:(com) => { console.log(com) } }); }else{ this.$toast(data.errMsg); } },
The front-end implements uploading files to oss (Alibaba Cloud) for vue, react, and uni-app, and obtains the first frame of the video
The user obtains oss configuration information and uploads the file to Alibaba Cloud, which ensures security and reduces the burden on the server. Generally, many file resources are directly uploaded to the server, which will increase the burden on the server. At this time, you can choose to upload to oss. Lightweight applications can directly upload file resources to the server. Not much nonsense, let's start to summarize the journey of stepping on the pit that I uploaded to oss.
used in vue
1. The first step is to register an Aliyun account, Alibaba Cloud official website
2. Install the oss module: npm i ali-oss -D
3. The specific use in Vue is as follows
a. Import module: import OSS from 'ali-oss'
b. Define data in data
data(){
return{
video_url:'',
client:null,
}
}