uniapp上传图片和视频到OSS

 

1.首先需要拿到formData里面的参数如下所示:

	formData: {
			name: nameStr,
			key: nameStr,
			policy: 'xxxxxxxxx', // 输入你获取的的policy
		OSSAccessKeyId: 'xxxxxxxxxxxx', // 输入你的AccessKeyId
		success_action_status: '200', // 让服务端返回200,不然,默认会返回204
		signature: 'xxxxxxxxxxxxxx'
				
					},

2.无需后台返回使用工具拿到以上参数:

  • 下载应用服务器代码
  • 将文件解压,并打开upload.js文件
  • 修改upload.js中的配置信息。

uniapp上传图片和视频到OSS_第1张图片

 

 

  • accessId : 设置你的AccessKeyId。
  • accessKey : 设置你的AessKeySecret。
  • host: 格式为bucketname.endpoint,例如bucket-name.oss-cn-hangzhou.aliyuncs.com。关于Endpoint的介绍,请参见Endpoint访问域名。
  • expiration:设置Policy的失效时间,如果超过失效时间,就无法通过此Policy上传文件。

3.进行上传测试

  1. 在浏览器打开index.html文件
    uniapp上传图片和视频到OSS_第2张图片
  2. 单击选择文件,选择指定类型的文件,单击开始上传。

4.获取上传需要的签名(signature)和加密策略(policy)。

按F12开启web调试,在请求中的Form Data中获取signature和policy。
uniapp上传图片和视频到OSS_第3张图片

5.使用uniapp上传图片

使用chooseImageApi选择本地图片后上传

 

	let tiemr = new Date();
			let address = tiemr.getFullYear() + '' + (tiemr.getMonth() + 1) + '' + tiemr.getDate();
			address = 'image' + '/';
			var imageSrc = this.videoList[0];
			let str = '.mp4';
			let nameStr = address + tiemr.getTime() + str;
			let ossUrl = 'http://wangnode.oss-cn-beijing.aliyuncs.com/';
			console.log(45, nameStr);
			console.log(45, imageSrc);
			console.log(45, str);
			uni.uploadFile({
				url: ossUrl, //输入你的bucketname.endpoint
				filePath: imageSrc,
				fileType: 'mp4',
				name: 'file',
				formData: {
					name: nameStr,
					key: nameStr,
					policy: 'xxx', // 输入你获取的的policy
					OSSAccessKeyId: 'xxx', // 输入你的AccessKeyId
					success_action_status: '200', // 让服务端返回200,不然,默认会返回204
					signature: 'xxxxx'

				},
				success: res => {
					console.log(1121321, res);
					if (res.statusCode == '200') {
						console.log(ossUrl + nameStr);
						//上传到服务器返回的地址
						this.$u.api.videoInfo({
							'vedioUrl': ossUrl + nameStr,
							'ticketId': parseInt(this.operateresultId),
							'ticketType': "operticket",
							'status': s,
							'isNormal': parseInt(this.isNormal)
						}).then(res => {
							console.log(45345, res);
							this.flagB = 1;
							this.updateState()

						})



					} else {
						console.log(res);
					}
				}
			});

 

你可能感兴趣的:(uniapp上传图片和视频到OSS)