javascript - Backbonejs 保存文件和表单数据

Question

我在表单和表单数据中有一个上传图像。表单数据存储在模型中

如何将表单数据与文件数据结合并保存模型

我正在设置模型属性以及如何在属性中包含文件数据。我找到了这个链接 Forcing Backbone to save an attribute as a file .我无法将它与我的表格联系起来

<form enctype="multipart/form-data">
  <input type="file" name="ImageData">
  <input type="text" name="UserName">
</form>

User = Backbone.Model.extend({
  readAvatar : function (file, callback) {
    var reader = new FileReader(); // File API object for reading a file locally
    reader.onload = (function (theFile, self) {
      return function (e) {
        // Set the file data correctly on the Backbone model
        self.set({avatar_file_name : theFile.name, avatar_data : fileEvent.target.result});
        // Handle anything else you want to do after parsing the file and setting up the model.
        callback();
     };
    })(file, this);
    reader.readAsDataURL(file); // Reads file into memory Base64 encoded
  }
    attribute : function(attr) {
      return Object.defineProperty(this.prototype, attr, {
        get: function() {
          return this.get(attr);
        },
        set: function(value) {
          var attrs;

          attrs = {};
          attrs[attr] = value;
          return this.set(attrs);
        }
      });
    };
});

   var form_data = form.serializeArray();

在提交表单后的 View 中，我正在序列化表单数据并读取文件。提交前在属性data中设置formdata，在Imagedata中设置文件

this.model.data =  form_data;
var profiledata;        
if (window.FormData) {  
        profiledata = new FormData(); 
        console.log(profiledata);   
}

if (profiledata) {  
    jQuery.each($('#ImageData')[0].files, function(i, file) {
        //reader.readAsDataURL(file);  
        profiledata.append("ImageData[]", file);

    });     
}   
    this.model.ImageData = profiledata;

    //and save the data
    this.model.save

我可以将一些字段保存为表单数据，将其他字段保存为属性吗？

如果我错了请告诉我。现在，在我提交后，我收到错误消息，因为“在未实现接口(interface) FormData 的对象上调用了‘追加’。”

这里avatar_file_name 和avatar_data 应该设置什么名字？我需要提交 field id 为 ImageData 的表单数据文件

Answer 1

我遇到了和你一样的问题。你可以在上面看到我解决它的方式。

var $form = $("myFormSelector");

//==> GET MODEL FROM FORM
var model = new MyBackboneModel();
var myData = null;
var ajaxOptions = {};
// Check if it is a multipart request.
if ($form.hasFile()) {
    myData = new FormData($form[0]);
    ajaxOptions = {
        type: "POST",
        data: myData,
        processData: false,
        cache: false,
        contentType: false
    };
} else {
    myData = $form.serializeObject();
}

// Save the model.
model.save(myData, $.extend({}, ajaxOptions, {
    success: function(model, data, response) {
        //==> INSERT SUCCESS
    },
    error: function(model, response) {
        //==> INSERT ERROR
    }
}));

hasFile 是扩展 JQuery 函数的自定义方法。

$.fn.hasFile = function() {
    if ($.type(this) === "undefined")
        return false;

    var hasFile = false;
    $.each($(this).find(":file"), function(key, input) {
        if ($(input).val().length > 0) {
            hasFile = true;
        }
    });

    return hasFile;
};