そのため、バックボーン モデルからの通常の POST (作成) 要求と共に画像をアップロードする方法の完全な例を見つけようと、ネットを 1 日トロールしてきました。そのため、最初に掘り下げた後FileReader、HTML5のAPIを発見しました-いくつかのテストの後、これを作成することでバックボーンの外でうまく機能しました XMLHttpRequest()
現在解決しようとしている問題は、通常のマルチパート フォーム ワークフローで経験するように、Bacbone に POST 要求と共に FILES データを送信させる方法です。私はバックボーンにかなり慣れていないので、明らかなエラーを許してください。ここに私がこれまでに持っているものがあります。
モデル
define(
[
'backbone'
],
function (Backbone) {
var Mock = Backbone.Model.extend({
url: '/api/v1/mocks',
idAttribute: '_id',
readFile: function(file){
var reader = new FileReader();
self = this;
reader.onload = (function(mockFile){
return function(e){
self.set({filename: mockFile.name, data: e.target.result});
};
})(file);
reader.readAsDataURL(file);
}
});
return Mock;
}
);
見る
define(
[
'jquery',
'backbone',
'underscore',
'text!../templates/create_mock-template.html',
'models/mock',
'collections/mocks'
],
function ($, Backbone, _, createMockTemplate, Mock, mocksCollection) {
var CreateMockView = Backbone.View.extend({
template: _.template(createMockTemplate),
events: {
'submit form': 'onFormSubmit',
'click #upload-link': 'process',
'change #upload': 'displayUploads'
},
initialize: function () {
this.render();
return this;
},
render: function () {
this.$el.html(this.template);
},
process: function(e){
var input = $('#upload');
if(input){
input.click();
}
e.preventDefault();
},
displayUploads: function(e){
// Once a user selects some files the 'change' event is triggered (and this listener function is executed)
// We can access selected files via 'this.files' property object.
var formdata = new FormData();
var img, reader, file;
var self = this;
for (var i = 0, len = e.target.files.length; i < len; i++) {
file = e.target.files[i];
if (!!file.type.match(/image.*/)) {
if (window.FileReader) {
reader = new FileReader();
reader.onloadend = function (e) {
self.createImage(e.target.result, e);
};
self.file = file;
reader.readAsDataURL(file);
}
}
}
},
createImage: function(source, fileobj) {
var image = '<img src="'+source+'" class="thumbnail" width="200" height="200" />'
this.$el.append(image);
},
onFormSubmit: function (e) {
e.preventDefault();
// loop through form elements
var fields = $(e.target).find('input[type=text], textarea');
var data = {};
// add names and vlaues to data object
$(fields).each(function(i, f) {
data[$(f).attr('name')] = $(f).attr('value');
});
// create new model from data
var mock = new Mock(data);
// this should set the filename and data attributes on the model???
mock.readFile(this.file);
// save to the server
mock.save(null, {
wait: true,
error: function(model, response) {
console.log(model)
},
success: function(model, response) {
mocksCollection.add(model);
console.log(model, response);
}
});
},
});
return CreateMockView;
}
);
私はこれがすべて少し手を振っているかもしれませんが、何よりも概念の証明であり、バックボーンも学ぶ良い機会であることを心から感謝しています. だから私の質問の核心はこれです
- リクエストがバックボーンから API に送信されると、node/express サーバーへのリクエストにデータとファイル名の属性が表示されないのはなぜですか
- 私がやろうとしていることは可能ですか?基本的には、データ属性を読み取ってサーバー上で作成およびイメージできると思いましたか?
- モック モデルで同期メソッドをオーバーライドし、POST と FILES が正しく設定された適切な形式のリクエストを作成する方法はありますか。
これは可能だと確信していますが、耕してこれを機能させるために必要な情報を見つけることができないようです.!
誰かが助けてくれることを願っています!
乾杯
編集
私の理解と、ドキュメント クラウドの IRC チャンネルでの簡単なチャットにより、もう少し情報を提供したかっただけです。だから私が電話するとき
mock.readFile(this.file)
fileName および data 属性が設定されていないようです。実際、ここのコンソールログは起動していないように見えるので、これが問題である可能性があると推測しています. データとファイル名の値に基づいて、基本的にノードの端にイメージを構築するこのアプローチに満足しています。では、なぜこれらのプロパティが設定され、ポスト リクエストで API に渡されないのでしょうか?