当前位置：首页 > article >正文

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

article 2025/3/6 21:42:15

详细步骤

使用 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"
});

转换路径并准备上传
通常，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);
    });
}

上传到阿里云 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);
}