javascript - Google 云存储签名 URL 上传 + Dropzone.js

Question

我正在尝试使用 Dropzone.js 通过签名 URL 直接上传到 Google Cloud Storage。我已经设法覆盖添加到 Dropzone 的每个文件的上传 URL。 Chrome 开发工具显示正在发生 PUT 请求，但我不可避免地收到 HTTP 400 错误响应。

这是我的 Dropzone.js 配置

Dropzone.options.myAwesomeDropzone = {
    url: '/',
    uploadMultiple: false,
    method: 'PUT',
    parallelUploads: 1,
    uploadMultiple: false,
    header: '',
    autoProcessQueue: false,
    autoDiscover: false,
    maxFiles: 1,
    acceptedFiles: 'image/*,video/*',
    accept: function(file, done) {
        var self = this;
        $.post('/api/v1/signed_file_upload', {key: window.apiKey, name: file.name, type: file.type}, function(data) {
            if(data.success) {
                file.uploadURL = data.data;
                done()
                setTimeout(function() {
                    self.processFile(file)
                }, 0)
            } else {
                done(data.message)
            }
        })
    },
    init: function() {
        var self = this;
        this.on('processing', function(file) {
            self.options.url = file.uploadURL
        })

        this.on('sending', function(file, xhr, formData) {
            var _send = xhr.send
            xhr.send = function() {
                _send.call(xhr, file)
            }
        });

    }
};

我的签名 URL 具有以下结构:

https://www.googleapis.com/upload/storage/v1/b/{bucket_name}/o/{object_name}.png?GoogleAccessId=xxx@xxx.iam.gserviceaccount.com&Expires=1521610072&Signature= xxx

Chrome 开发工具针对上传请求显示此信息:

我不可避免地收到 HTTP 400 响应。有时正文是空的，有时它返回一个 JSON 对象，内容为

{
    "error": {
        "errors": [
            {
                "domain": "global",
                "reason": "badContent",
                "message": "Unsupported content with type: image/jpeg"
            }
        ],
        "code": 400,
        "message": "Unsupported content with type: image/jpeg"
    }
}

我的签名生成函数是

function storage_url($file_name, $bucket_name = '', $content_type = '', $method = 'PUT', $duration = 3000) { 
    $expires      = time() + $duration; 
    $signature    = '';
    $to_sign      = ($method . "\n\n" . $content_type . "\n" . $expires . "\n" . '/' . $bucket_name . '/' . $file_name); 
    $private_key  = json_decode(file_get_contents('xxx.json'))->private_key;

    if(!openssl_sign( $to_sign, $signature, $private_key, 'sha256' )) 
    { 
        return false;
    } 
    else 
    { 
        $signature = urlencode(base64_encode($signature)); 
    }

    error_log($to_sign);

    return 'https://www.googleapis.com/upload/storage/v1/b/' . $bucket_name . '/o/' . urlencode($file_name) . 
        '?GoogleAccessId=' . 'xxx@xxx.iam.gserviceaccount.com' . 
        '&Expires=' . $expires . 
        '&Signature=' . $signature;
}

Answer 1

GCS 有两个 API。第一个是 XML API，使用 storage.googleapis.com 等域。第二个是 JSON API，使用诸如 www.googleapis.com 之类的域。

您正在使用 JSON API，这很好，但遗憾的是它不支持签名 URL。使用 XML API 的格式制作上传 URL:https://cloud.google.com/storage/docs/xml-api/put-object-upload