專(zhuān)業(yè)汽車(chē)網(wǎng)站seo日常工作都做什么的
前端實(shí)現(xiàn)文件上傳到oss（阿里云）適用于vue、react、uni-app，獲取視頻第一幀圖片
用戶(hù)獲取oss配置信息將文件上傳到阿里云，保證了安全性和減輕服務(wù)器負(fù)擔(dān)。一般文件資源很多直接上傳到服務(wù)器會(huì)加重服務(wù)器負(fù)擔(dān)此時(shí)可以選擇上傳到oss，輕量型的應(yīng)用可以直接將文件資源上傳到服務(wù)器就行。廢話(huà)不多說(shuō)，下面開(kāi)始總結(jié)本人上傳到oss的踩坑之旅。
vue中使用
1、第一步，要注冊(cè)阿里云賬號(hào)，阿里云官網(wǎng)
2、安裝oss模塊：npm i ali-oss -D
3、在vue具體使用如下
a、引入模塊：import OSS from ‘a(chǎn)li-oss’
b、data中定義數(shù)據(jù)
data(){return{video_url:'',client:null,}
}
c、初始化OSS對(duì)象：
this.client = new OSS({region: '',//地域（在創(chuàng)建 Bucket 的時(shí)候指定的中心位置），這里可能不知道具體地域怎么填其實(shí)就是 oss-cn-中心位置 ，例：region:'oss-cn-chengdu'，chengdu則是創(chuàng)建bucket是指定的位置成都。accessKeyId: '', //阿里云產(chǎn)品的通用idaccessKeySecret: '',//密鑰bucket: '' //OSS 存儲(chǔ)區(qū)域名
});
d、定義選取文件上傳到oss的方法
uploadFile(event){let file = event.target.files[0]if(!(/^\S+\.mp4$/.test(file.name))){return this.$message.error('請(qǐng)上傳視頻文件')}/*** 文件的類(lèi)型，判斷是否是視頻*/let param = new FormData()param.append('file', file, file.name);console.log('開(kāi)始上傳')this.put(file.name,file)
},
e、定義put方法上傳到阿里云
async put (name,file) {try {var fileName = new Date().getTime()+name;//object-name可以自定義為文件名（例如file.txt）或目錄（例如abc/test/file.txt）的形式，實(shí)現(xiàn)將文件上傳至當(dāng)前Bucket或Bucket下的指定目錄。let result = await this.client.put(fileName, file);this.video_url=result.url;//返回的上傳視頻地址//一下為生成圖片處理的簽名 URL t_1000表示第一秒視頻圖片，常用來(lái)作為視頻封面圖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);} },可能遇到的問(wèn)題：
1、跨域不能上傳成功：
去阿里云配置域名，上傳服務(wù)器驗(yàn)證
uni-app中使用（需要后端配合一下）
1、data定義數(shù)據(jù)
data() {return {ossData:{accessid: "",dir: "/uploads/202003/",expire: 1585653811,host: "",policy: "",signature: ""},fileInfo:null,} },2、定義選擇要上傳的視頻文件方法
selVideo(type){uni.chooseVideo({count: 1,maxDuration:15,compressed:false,success: (res) => {if(parseFloat(res.duration)>=16){return this.$toast('請(qǐng)選取小于15s的視頻！')}let tempFilePath = res.tempFilePath;this.fileInfo=res;if(!this.fileInfo){return}uni.showLoading({title:'上傳中...'})this.getOssSign(res.tempFilePath) } }); },3、定義獲取服務(wù)器端返回oss配置方法
async getOssSign(path,type){let [e, data] = await this.$api.getOssSign();if (e) returnif (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, //后臺(tái)給的阿里云存儲(chǔ)給的上傳地址filePath: path, fileType: 'video',name: 'file',formData: {key: fileName, //文件名policy: this.ossData.policy, //后臺(tái)獲取超時(shí)時(shí)間OSSAccessKeyId: this.ossData.accessid, //后臺(tái)獲取臨時(shí)IDsuccess_action_status: '200', //讓服務(wù)端返回200,不然，默認(rèn)會(huì)返回204signature: this.ossData.signature //后臺(tái)獲取簽名},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);} },
