javascript - 将文件上传到 Amazon S3 并出现 Dropzone.js 问题

Question

我正在尝试使用 Dropzone.js 将文件上传到 S3 服务

我使用本教程直接从客户端上传文件:

https://devcenter.heroku.com/articles/s3-upload-node - 本教程不包括使用 dropzone js 的实现(这是一场噩梦)

流程非常简单:

1. 请求我的服务器从亚马逊获取签名
2. 从亚马逊获取签名的请求 URL + 预期的文件 URL
3. 使用签名的请求网址覆盖 dropzone.options.url
4. 调用dropzone.processFile将文件上传到服务器

文件已上传到服务器，直到这里一切正常，当我尝试查看文件(在S3 Bucket界面)时，似乎文件写入不正确，我无法查看它。

根据源代码，文件是使用FormData对象上传的。

Dropzone.prototype.submitRequest = function(xhr, formData, files) {
  return xhr.send(formData);
}

如果我更改源代码:

xhr.send(formData)

至

xhr.send(files[0])

一切都很好，但我失去了上传多个文件的能力。

这是 dropzone 配置:

{
   url: 'http://signature_url',
   accept: _dropzoneAcceptCallback,
   method: 'put',
   headers: {
      'x-amz-acl': 'public-read',
      'Accept': '*/*',
      'Content-Type': file.type
   },
   clickable: ['.choose-files'],
   autoProcessQueue: false
}

希望这已经足够了:)

谢谢。

Answer 1

以下是对我的 dropzone 初始化参数和后端节点 S3 签名有用的内容:

使用 Dropzone 的 HTML 前端代码:

var myDropzone = new Dropzone(dropArea, { 
    url:"#",
    dictDefaultMessage: "Drag n drop or tap here",
    method: "PUT",
    uploadMultiple: false,
    paramName: "file",
    maxFiles: 10,
    thumbnailWidth: 80,
    thumbnailHeight: 80,
    parallelUploads: 20,
    autoProcessQueue: true,
    previewTemplate: dropPreviewTemplate,
    //autoQueue: false, // Make sure the files aren't queued until manually added
    previewsContainer: dropPreviewContainer, // Define the container to display the previews
    clickable: true, //".fileinput-button" // Define the element that should be used as click trigger to select files.
    accept: function(file, cb) {
        //override the file name, to use the s3 signature
        //console.log(file);
        var params = {
          fileName: file.name,
          fileType: file.type,
        };

        //path to S3 signature 
        $.getJSON('/uploader', params).done(function(data) {
            //console.log(data);

          if (!data.signedRequest) {
            return cb('Failed to receive an upload url');
          }

          file.signedRequest = data.signedRequest;
          file.finalURL = data.downloadURL;
          cb();
        }).fail(function() {
          return cb('Failed to receive an upload url');
        });
    },
    sending: function(file, xhr) {

        console.log('sending')
        var _send = xhr.send;
        xhr.setRequestHeader('x-amz-acl', 'public-read');
        xhr.send = function() {
            _send.call(xhr, file);
        }

    },
    processing:function(file){

        this.options.url = file.signedRequest;

    }
    });

这是我在 Node.js 端使用的库

var Crypto = require("crypto"),
    AWS = require("aws-sdk"),

这是 S3 上的 CORS 配置示例

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>

以下是在 node.js 上生成 S3 签名的代码:

        getPolicy:function(req,res)
        {
            var fileId = Crypto.randomBytes(20).toString('hex').toUpperCase();

            var prefix = "bl_";
            var newFileName = prefix+fileId;//req.query.fileName;

            var s3 = new AWS.S3();
            var s3_params = {
                Bucket: BUCKET,
                Key: newFileName,
                Expires: 60,
                ContentType: req.query.fileType,
                ACL: 'public-read'
            };
            s3.getSignedUrl('putObject', s3_params, function(err, data){
                if(err){
                    console.log(err);
                }
                else{
                    var return_data = {
                        signedRequest: data,
                        uploadURL: 'https://'+BUCKET+'.s3.amazonaws.com/'+newFileName,
                        downloadURL: 'http://'+BUCKET+'.s3-website-us-east-1.amazonaws.com/'+newFileName,
                    };
                    res.write(JSON.stringify(return_data));
                    res.end();
                }
            });


        }

希望其中一些内容能有所帮助。