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

╰半橙微兮° 2021-07-25 13:03 693阅读 0赞

# 本地图片生成网络图片 #

需求：从本地相册或者拍摄图片后，直接通过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()函数是进行图片信息的上传，此处的上传属于另一个接口的数据更新。
    						  }
    						})
    					}
    				}
    			)
    		}
    	});
    }