使用 Dropzone 将文件上传到 BrickFTP答案

【问题标题】：Uploading file to BrickFTP using Dropzone使用 Dropzone 将文件上传到 BrickFTP
【发布时间】：2017-11-06 10:30:53
【问题描述】：

我一直在尝试使用Dropzone实现文件上传到BrickFTP，但是上传的文件无法打开，因为它包含文件内容顶部的WebKitFormBoundary。

根据BrickFTP's documentation，我将PUT 的方法放入Dropzone 配置中。 BrickFTP 使用 Amazon S3，因此文件实际上正在上传到 S3。我按照他们的文档做了所有事情，除了上传文件内容顶部的那些额外信息之外，一切正常，除了最后一个问题。

这是负责文件上传的 Coffeescript 代码：

brickFTPData = {}

# As per BrickFTP docs, step 1 is 
# to get the dedicated upload url for each file by sending a  
# request to REST API to indicate intent to upload a file
getUploadUri = (file) ->
   result = ""
   $.ajax
      url      : '/a/portal-dev/get-api-keys'
      type     : 'POST'
      dataType : 'json'
      data     : { file_name: file.name }
      async    : false
      success  : (data, textStatus, jqXHR) ->
         brickFTPData[file.upload.uuid] =
            file_name   : file.name
            upload_uri  : data.upload_uri
            ref         : data.ref
         result = data.upload_uri
   return result

# 3rd step is to notify the REST API that the file upload is complete.
finishUpload = (file) ->
   $.ajax
      url      : '/a/portal-dev/upload-done'
      type     : 'POST'
      dataType : 'json'
      data     :
         ref         : brickFTPData[file.upload.uuid].ref
         file_name   : brickFTPData[file.upload.uuid].file_name
      success  : (data) ->
         delete brickFTPData[file.upload.uuid]
         console.log data.status

# 2nd step is to upload the file
sampleQuoteDropzone = new Dropzone "#sampleQuoteDropzone",
   url            : '/demo'
   method         : 'PUT'
   headers        : {"Content-Type": "application/octet-stream"}
   success        : (file, request) ->
      finishUpload(file)

sampleQuoteDropzone.on 'processing', (file) ->
   upload_uri = getUploadUri(file)
   sampleQuoteDropzone.options.url = upload_uri

使用上面的代码上传工作正常，但正如我在文本编辑器中打开上传的文件时所说的那样，它以以下代码开头：

------WebKitFormBoundaryw4bIakMBbkp7ES2E
Content-Disposition: form-data; name="file"; filename="IMG_5652.jpg"
Content-Type: image/jpeg

如果我删除这些行并保存文件，它将起作用。

但是在 Dropzone 之外使用常规 ajax 调用上传文件时不会出现此问题。以下是工作代码：

$.ajax
     url: data.upload_uri
     type: 'PUT'
     contentType: 'application/octet-stream'
     data: file
     processData: false
     success: (response) ->
        finishUpload(file, data)

谁能告诉我如何解决这个问题？

【问题讨论】：

标签： amazon-s3 dropzone

【解决方案1】：

我用下面的代码解决了这个问题：

sampleQuoteDropzone.on 'sending', (data, xhr, formData) ->
   _send = xhr.send
   xhr.send = ->
      _send.call(xhr, data)

这个解决方案其实是在here找到的。我在这里发布这个问题之前看到了这个，但不确定这是否是正确的问题/解决方案。我联系了 BrickFTP，他们很快就回复说这个解决方案可能对我有用，是的，它确实有效。

【讨论】：