什么网站做生鲜比较好,安徽建设厅城乡官网,linux网站开发工具,wordpress最近怎么又是5.0更新前端实现文件上传到oss#xff08;阿里云#xff09;适用于vue、react、uni-app#xff0c;获取视频第一帧图片 用户获取oss配置信息将文件上传到阿里云#xff0c;保证了安全性和减轻服务器负担。一般文件资源很多直接上传到服务器会加重服务器负担此时可以选择上传到oss阿里云适用于vue、react、uni-app获取视频第一帧图片 用户获取oss配置信息将文件上传到阿里云保证了安全性和减轻服务器负担。一般文件资源很多直接上传到服务器会加重服务器负担此时可以选择上传到oss轻量型的应用可以直接将文件资源上传到服务器就行。废话不多说下面开始总结本人上传到oss的踩坑之旅。 vue中使用 1、第一步要注册阿里云账号阿里云官网 2、安装oss模块npm i ali-oss -D 3、在vue具体使用如下 a、引入模块import OSS from ‘ali-oss’ b、data中定义数据 data(){return{video_url:,client:null,}
}c、初始化OSS对象
this.client new OSS({region: ,//地域在创建 Bucket 的时候指定的中心位置这里可能不知道具体地域怎么填其实就是 oss-cn-中心位置 例region:oss-cn-chengduchengdu则是创建bucket是指定的位置成都。accessKeyId: , //阿里云产品的通用idaccessKeySecret: ,//密钥bucket: //OSS 存储区域名
});d、定义选取文件上传到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、定义put方法上传到阿里云
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_urlresult.url;//返回的上传视频地址//一下为生成图片处理的签名 URL t_1000表示第一秒视频图片常用来作为视频封面图const imgRes this.video_url?x-oss-processvideo/snapshot,t_1000,f_jpg,w_0,h_0,m_fast; } catch (e) { console.log(e);}
},
可能遇到的问题 1、跨域不能上传成功 去阿里云配置域名上传服务器验证
uni-app中使用需要后端配合一下
1、data定义数据
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(请选取小于15s的视频)}let tempFilePath res.tempFilePath;this.fileInfores;if(!this.fileInfo){return}uni.showLoading({title:上传中...})this.getOssSign(res.tempFilePath) } });
},3、定义获取服务器端返回oss配置方法
async getOssSign(path,type){let [e, data] await this.$api.getOssSign();if (e) returnif (data.errNum 200) { this.ossDatadata.result; let fileNamenew Date().getTime()appthis.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, //后台获取临时IDsuccess_action_status: 200, //让服务端返回200,不然默认会返回204signature: this.ossData.signature //后台获取签名},success: (res) {console.log(res,fileName);uni.hideLoading();uni.showToast({title: 上传成功,icon: success,duration: 1000});this.videothis.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);}
},
