uniapp 拍照或者选择相册图片后通过阿里OSS生成网络图片

本地图片生成网络图片

需求:从本地相册或者拍摄图片后,直接通过OSS存储生成网络图片。

async chooseImage(){
     
	let _this = this;
	uni.chooseImage({
     
		count: 1, //最多可以选择的图片张数,默认9
		sizeType: ['original', 'compressed'], //original 原图,compressed 压缩图,默认二者都有
		sourceType: ['album','camera'], //album 从相册选图,camera 使用相机,默认二者都有
		success: (respone)=> {
     
			_this.$request.urlRequest(
				'/gate/oss/token',//此处的接口是后台提供的,调取阿里OSS的接口
				{
     },
				'GET',
				function (res) {
     
					console.log("res",res);
					if (res.code == 200) {
     
						let data = res.result;
						let env = {
     
						  uploadImageUrl: 'https://58d.oss-cn-hangzhou.aliyuncs.com/', // 默认存在根目录,可根据需求改
						  AccessKeySecret: data.AccessKeySecret,        // AccessKeySecret 去你的阿里云上控制台上找
						  OSSAccessKeyId: data.AccessKeyId,         // AccessKeyId 去你的阿里云上控制台上找
						  stsToken: data.SecurityToken,
						   timeout: 87600 //这个是上传文件时Policy的失效时间
						}
						let dir = 'images/';
						let filePath = respone.tempFilePaths[0];
						const aliyunFileKey = dir + new Date().getTime() + Math.floor(Math.random() * 150) + '.png';
						const aliyunServerURL = env.uploadImageUrl;//OSS地址,需要https
						const accessid = env.OSSAccessKeyId;
						const policyBase64 = _this.getPolicyBase64(env);
						const signature = _this.getSignature(policyBase64, env);//获取签名
						const stsToken = env.stsToken;
						uni.uploadFile({
     
						  url: "https://58d.oss-cn-hangzhou.aliyuncs.com/",//开发者服务器 url
						  filePath: filePath,//要上传文件资源的路径
						  name: 'file',//必须填file
						  formData: {
     
						    'key': aliyunFileKey,
						    'policy': policyBase64,
						    'OSSAccessKeyId': accessid,
						    'signature': signature,
						    'success_action_status': '200',
							'x-oss-security-token': stsToken,
							'stsToken': stsToken,
						  },
						  success: function (res) {
     
								_this.userInfo.avatar = aliyunServerURL+aliyunFileKey;
								_this.update();//此处的update()函数是进行图片信息的上传,此处的上传属于另一个接口的数据更新。
						  }
						})
					}
				}
			)
		}
	});
}

你可能感兴趣的:(uniapp电商app开发,vue.js)