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 });
                // 继续上传到 OSS
                uploadToOSS(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，这样可以简化签名和上传流程。