uniapp 使用htmlPlus从相册选择照片并上传OSS

详细步骤

1. 使用 plus.gallery.pick 选择图片

plus.gallery.pick(function(path) {console.log('Selected image path: ' + path);// 处理上传uploadImage(path);
}, function(error) {console.error('Failed to select image: ' + error.message);
}, {filter: "image"
});

2. 转换路径并准备上传
   通常，plus.gallery.pick 返回的路径是本地路径，你可以使用 plus.io 来读取文件并转换为 Blob 或 Base64 格式，方便上传。

function uploadImage(filePath) {plus.io.resolveLocalFileSystemURL(filePath, function(entry) {entry.file(function(file) {var reader = new plus.io.FileReader();reader.onloadend = function(e) {var blob = new Blob([new Uint8Array(e.target.result)], { type: file.type });// 继续上传到 OSSuploadToOSS(blob, file.name);};reader.readAsArrayBuffer(file);});}, function(e) {console.error("Resolve file URL failed: " + e.message);});
}

3. 上传到阿里云 OSS
   上传到 OSS 通常需要使用阿里云提供的 SDK 或者直接使用 HTTP 请求。这里是一个简单的 HTTP 上传示例：

function uploadToOSS(blob, fileName) {var xhr = new XMLHttpRequest();xhr.open('PUT', 'https://your-oss-bucket.oss-region.aliyuncs.com/' + fileName, true);xhr.setRequestHeader('Content-Type', blob.type);xhr.setRequestHeader('x-oss-object-acl', 'public-read');xhr.onload = function() {if (xhr.status === 200) {console.log('Upload successful!');} else {console.error('Upload failed: ' + xhr.status);}};xhr.onerror = function() {console.error('Upload error.');};xhr.send(blob);
}

注意事项
OSS 签名：在实际应用中，直接上传到 OSS 通常需要进行签名，以确保安全性。你需要在服务器端生成签名并将其传递到前端进行上传。

CORS 设置：确保你的 OSS Bucket 已经配置了 CORS，允许客户端直接上传。

SDK 使用：可以考虑使用阿里云官方提供的 OSS SDK，这样可以简化签名和上传流程。