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)
    
    
    
                
   
   
   
    
    
    
   
   
   
                
                
        

```
相关推荐
曲邹萌11 分钟前
springboot-vue excel上传导出
vue.js·spring boot·导入导出
蒜蓉大猩猩21 分钟前
Vue.js - 组件化编程
开发语言·前端·javascript·vue.js·前端框架·ecmascript
乐闻x1 小时前
最佳实践:如何在 Vue.js 项目中使用 Jest 进行单元测试
前端·vue.js·单元测试
小仓桑1 小时前
利用 Vue 组合式 API 与 requestAnimationFrame 优化大量元素渲染
前端·javascript·vue.js
○陈2 小时前
vue2面试题10|[2024-11-24]
前端·javascript·vue.js
在荒野的梦想2 小时前
Vue-TreeSelect组件最下级隐藏No sub-options
前端·javascript·vue.js
汪小白JIY9 小时前
【VUE3】VUE组合式(响应式)API常见语法
vue.js·vue3·语法
ZL_56711 小时前
uniapp中使用uni-forms实现表单管理,验证表单
前端·javascript·uni-app
沉浮yu大海11 小时前
Vue.js 组件开发:构建可重用且高效的 UI 块
前端·vue.js·ui
在路上`12 小时前
vue实现列表滑动下拉加载数据
javascript·vue.js·ecmascript