获取要从 dropzone 发送到后端的实际文件

Question

我在从 Dropzone 对象（使用 Vue-Dropzone）抓取文件并将它们附加到我正在使用其他参数构建的自定义 formData 对象时遇到困难。

我想要实现的是一个带有 Dropzone 的表单，它通过 ajax 提交，我试图获取用户选择的所有文件并创建一个对象以传递给后端的形式

files[file_1] = file_1
files[file_2] = file_2

等等。我使用了下面的代码但没有成功

let files = {};
  _.each(this.$refs.dropzoneID.getQueuedFiles(), (file, index) => {
    files[index] = file;
});

// console.log(files);

this.formData.append('files', files);

process_form_via_axios_call

我在后端得到的是：

params={"files"=>"[object Object]"}

虽然我期待这样的事情：

{"files" => {"file_1"=>#<ActionDispatch::Http::UploadedFile:0x007fd14c9ec940 @tempfile=#<Tempfile:/var/folders/lk/bhps4r5d3s1fzmywxlp59f480000gn/T/RackMultipart20171002-87936-1tnd839.jpg>, @original_filename="restaurant-person-woman-coffee-medium.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"file\"; filename=\"restaurant-person-woman-coffee-medium.jpg\"\r\nContent-Type: image/jpeg\r\n">......}

我怎样才能做到这一点？

Answer 1

实际上可以通过这样做来解决这个问题：

_.each(this.$refs.dropzoneID.getQueuedFiles(), (file, index) => {
   this.formData.append('files[file_' + index +']', file);
});

工作得很好。

获取要从 dropzone 发送到后端的实际文件

Getting actual files to send to backend from dropzone

form-data

ruby-on-rails-4

vuejs2

dropzone