以 Taro 框架为例(微信小程序可以直接将 Taro 替换为 wx)。
首先获取图片
Taro.chooseImage({count: 1,sizeType: ['original', 'compressed'],success: (result) => {// 上传图片文件的具体代码useTaroUploadFile(result.tempFilePaths[0]).then(res=> {});},fail: res => {Taro.showToast({title: res.errMsg;icon: 'error',})}})
需要安装2个库
yarn add crypto-js
yarn add js-base64
上传具体代码
export const useTaroUploadFile = (file) => {return new Promise((resolve, reject) => {// 需要获取文件的后缀,所以要调用该方法Taro.getImageInfo({src: file,success: info=>{// getSts:从后台获取上传所需要的参数,formData里面的参数可以全部由后台计算,部分也可以由前端计算getSts().then(res=> {const {bucketName, endpoint, dirPath, accessKeyId, securityToken, accessKeySecret} = res;const t = new Date();const policyText = {expiration: t.toISOString(), // 设置policy过期时间。conditions: [// 限制上传大小。["content-length-range", 0, 1024 * 1024 * 1024],],};const policy = Base64.encode(JSON.stringify(policyText));Taro.uploadFile({url: `https://${bucketName}.${endpoint}`,filePath: file,name: 'file',formData: {key: dirPath + "/" + t.getTime() + '.' + info.type,policy: policy,OSSAccessKeyId: accessKeyId,signature: signature(policy, accessKeySecret),'x-oss-security-token': securityToken // 使用STS签名时必传。},success: uploadSuccess => {if (uploadSuccess.statusCode === 204){resolve(`https://${bucketName}.${endpoint}/${dirPath}/${t.getTime()}.${info.type}`)}},fail: res1 => {Taro.showToast({title: '上传失败,请重试',icon: 'error',})}})})}})})}
其中,formData 的具体参数可以参考oss官方文档。