vue+iviewUi+oss直传阿里云上传文件

前端实现文件上传到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中定义数据

javascript 复制代码
data(){
      return{
      	video_url:'',
      	client:null,
      }
}

c、初始化OSS对象:

javascript 复制代码
this.client = new OSS({
        region: '',//地域(在创建 Bucket 的时候指定的中心位置),这里可能不知道具体地域怎么填其实就是 oss-cn-中心位置 ,例:region:'oss-cn-chengdu',chengdu则是创建bucket是指定的位置成都。
        accessKeyId: '', //阿里云产品的通用id
        accessKeySecret: '',//密钥
        bucket: '' //OSS 存储区域名
});

 
 
 

d、定义选取文件上传到oss的方法

javascript 复制代码
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方法上传到阿里云

javascript 复制代码
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);
        }
},
可能遇到的问题:
 1、https://so.csdn.net/so/search?q=%E8%B7%A8%E5%9F%9F&spm=1001.2101.3001.7020不能上传成功:
 ![跨域不能上传成功里插入图片描述](https://file.jishuzhan.net/article/1688840858373197826/6c07624b4a054ba0ac24e69797f19d9e.png)
 去阿里云配置域名,上传服务器验证
 ![](https://file.jishuzhan.net/article/1688840858373197826/4f60ccca9a854f40a88810cfa2fc17d3.png) 
uni-app中使用(需要后端配合一下) 
1、data定义数据 
data()` `{`
	`return` `{`
		`ossData:{`
			`accessid:` `"",`
			`dir:` `"/uploads/202003/",`
			`expire:` `1585653811,`
			`host:` `"",`
			`policy:` `"",`
			`signature:` `""`
		`},`
		`fileInfo:null,`
	`}`
`},`
`

2、定义选择要上传的视频文件方法
 

```javascript
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)	
		}							
	});
},

   
   
   
   
   
   
    
    ![](https://file.jishuzhan.net/article/1688840858373197826/3a75b30272be4ffd931a2fcc18a0cd14.png)
   
   
   
3、定义获取服务器端返回oss配置方法 
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`);`
	`}`
`},`
`
    
    
    


    
    
    

     
     ![](https://file.jishuzhan.net/article/1688840858373197826/50a147d902294e07887c4b6c43594765.png)
    
    
    
                
   
   
   
    
    
    
   
   
   
                
                
        

```
相关推荐
Dread_lxy43 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
龙猫蓝图3 小时前
vue el-date-picker 日期选择器禁用失效问题
前端·javascript·vue.js
fakaifa3 小时前
CRMEB Pro版v3.1源码全开源+PC端+Uniapp前端+搭建教程
前端·小程序·uni-app·php·源码下载
转角羊儿3 小时前
uni-app请求方法封装⑦
uni-app
java知路3 小时前
uniapp h5实现录音
uni-app
peachSoda73 小时前
随手记:简单实现纯前端文件导出(XLSX)
前端·javascript·vue.js
Tttian6223 小时前
Vue全栈开发旅游网项目(11)-用户管理前端接口联调
前端·vue.js·django
龙猫蓝图5 小时前
vue el-date-picker 日期选择 回显后成功后无法改变的解决办法
前端·javascript·vue.js
haodanzj5 小时前
在uniapp中封装请求接口 (带刷新token)
前端·javascript·uni-app
空&白5 小时前
uniapp h5地址前端重定向跳转
前端·uni-app