Wie kann ich mehrere Bilder zusammen mit anderen Eingabefeldern in vue js html hinzufügen?
Lesezeit: 9 Minuten
Wanderer
Mein HTML-Code ist
Ich muss auch sez hinzufügen, das im Array-Format vorliegt, und ich muss mehrere Bilder hinzufügen, ein Bild hinzufügen und beim Klicken darauf Bilder nach Bedarf des Clients hinzufügen
Das ist mein Code. Ich habe keine Ahnung, wie man in diesem Fall Bilder hinzufügt.
Kann mir bitte jemand helfen, diese Daten zu übergeben.
Wie werden diese Daten zusammen mit Bildern an das Backend übergeben?
Ich möchte keine base64-Codierung verwenden. Ich muss dieses Bild nur in dieser Ajax-Post-Anforderung zusammen mit anderen Daten übergeben
Diese Frage hat ein paar Optionen für das Hochladen von Dateien mit Vue. Außerdem hat eine Google-Suche nach “vue upload file” viele Ergebnisse zurückgegeben, die Ihnen helfen sollten.
– Patrick Steele
20. April 2018 um 12:09 Uhr
Suchen Sie nur nach dem Hochladen von Dateien, ich habe formData verwendet, aber ich habe Zweifel, da Sie ein Array haben. Andernfalls können Sie formdata verwenden, denke ich. Wenn Sie diese Antwort erhalten, ist dies auch für mich eine Hilfe. Laden Sie einfach hoch, wenn Sie dasselbe erhalten
– Codierer
20. April 2018 um 12:25 Uhr
Was hast du im Backend?
– acdcjunior
22. April 2018 um 18:05 Uhr
node js sir.. Ich muss nur die Daten vom Frontend übergeben
@Wanderer a FormData -Objekt kann mehrere Einträge mit demselben Namen enthalten, initialisieren Sie also einfach die FormData, indem Sie Ihr Formularelement übergeben, oder hängen Sie an sez.data und sez.details mehrmals.
– Marco Pantaleoni
24. April 2018 um 8:15 Uhr
Sally C.J
Ich bin mir nicht sicher, wo die zusätzlichen Bilder erscheinen sollen, aber ich habe sie nach dieser Spalte hinzugefügt:
Und der vollständige Vue JS-Code (mit jQuery.ajax()):
addForm = new Vue({
el: "#addForm",
data: {
name: '',
alias: '',
sex: '',
sez: [{
date: null,
details: null
}],
// I removed `photo` and `sign` because (I think) the're not necessary.
// Add I added `images` so that we could easily add new images via Vue.
images: [],
maxImages: 5,
// Selector for the "Add Image" button. Try using (or you should use) ID
// instead; e.g. `button#add-image`. But it has to be a `button` element.
addImage: 'button.add-image'
},
methods: {
addNewRow: function() {
// I changed to `this.sez.push` because `this.seziure` is `undefined`.
this.sez.push({
date: null,
details: null
});
},
addNewImage: function(e) {
var n = this.maxImages || -1;
if (n && this.images.length < n) {
this.images.push('');
}
this.checkImages();
},
removeImage: function(index) {
this.images.splice(index, 1);
this.checkImages();
},
checkImages: function() {
var n = this.maxImages || -1;
if (n && this.images.length >= n) {
$(this.addImage, this.el).prop('disabled', true); // Disables the button.
} else {
$(this.addImage, this.el).prop('disabled', false); // Enables the button.
}
},
previewImage: function(index, e) {
var r = new FileReader(),
f = e.target.files[0];
r.addEventListener('load', function() {
$('[class~="images[' + index + ']-preview"]', this.el).html(
'<img src="' + r.result + '" class="thumbnail img-responsive">'
);
}, false);
if (f) {
r.readAsDataURL(f);
}
},
handleSubmit: function(e) {
var vm = this;
var data = new FormData(e.target);
data.append('sez', this.sez);
data.append('name', this.name);
data.append('alias', this.alias);
data.append('sex', this.sex);
// The `data` already contain the Signature and Recent Photograph images.
// Here we add the extra images as an array.
$('[class~="images[]"]', this.el).each(function(i) {
if (i > vm.maxImages - 1) {
return; // Max images reached.
}
data.append('images[' + i + ']', this.files[0]);
});
$.ajax({
url: 'http://localhost:4000/save/',
data: data,
type: 'POST',
dataType: 'json',
success: function(e) {
if (e.status) {
vm.response = e;
alert("success");
} else {
vm.response = e;
console.log(vm.response);
alert("Registration Failed");
}
},
cache: false,
contentType: false,
processData: false
});
return false;
},
},
});
Zusätzliche Bemerkungen
Ich weiß, dass Sie Node.js im Backend verwenden; Allerdings sollte ich erwähnen, dass in PHP die $_FILES Variable würde alle Bilder enthalten (solange die fields name richtig eingestellt sind); und ich nehme an, Node.js hat eine ähnliche Variable oder Möglichkeit, die Dateien abzurufen.
Und im Folgenden inputhaben Sie möglicherweise vergessen zu wickeln book.details in v-model:
Funktion hinzugefügt, um die Anzahl der Bilder zu begrenzen, die ausgewählt/hochgeladen werden dürfen, und Vorschau für ausgewählte Bilder hinzugefügt. Plus die “Bilder senden als array„korrigieren.
Herr, vielen Dank. Ein weiterer Zweifel, ist es möglich, Bilder als Array zu senden (genauso wie wir es für Sex tun), anstatt als Bild1, Bild2 zu senden
– Wanderer
18. Mai 2018 um 5:35 Uhr
Versuchen Sie, sich zu ändern <input type="file" :name="'images' + (index + 1)" accept="image/*"> zu <input type="file" name="images[]" accept="image/*">.
Sir, warum wird Ihnen auch :if=”images.length” gegeben?
– Wanderer
18. Mai 2018 um 6:07 Uhr
Wenn Sie HTML5 verwenden, versuchen Sie es mit a Formulardaten Objekt ; Es wird den Inhalt Ihrer Dateieingabe codieren:
var myForm = document.getElementById('addForm');
formData = new FormData(myForm);
data: formData
können Sie bitte zeigen, wie sez durch diesen Code hinzugefügt werden kann
– Wanderer
24. April 2018 um 8:06 Uhr
Das FormData-Objekt sollte alle Schlüssel/Werte des Formulars enthalten, indem die Namenseigenschaft jedes Elements verwendet wird. Versuchen Sie, Ihren Eingabefeldern einen Namen hinzuzufügen. Sie können auch ein Array über FormData senden: for (var i = 0; i < sez.length; i++) { formData.append('sez[]', sez[i]); }
– LBS
26. April 2018 um 6:52 Uhr
Verwenden Sie die folgende Vorlage, um das Bild anzuzeigen/hochzuladen:
Diese Frage hat ein paar Optionen für das Hochladen von Dateien mit Vue. Außerdem hat eine Google-Suche nach “vue upload file” viele Ergebnisse zurückgegeben, die Ihnen helfen sollten.
– Patrick Steele
20. April 2018 um 12:09 Uhr
Suchen Sie nur nach dem Hochladen von Dateien, ich habe formData verwendet, aber ich habe Zweifel, da Sie ein Array haben. Andernfalls können Sie formdata verwenden, denke ich. Wenn Sie diese Antwort erhalten, ist dies auch für mich eine Hilfe. Laden Sie einfach hoch, wenn Sie dasselbe erhalten
– Codierer
20. April 2018 um 12:25 Uhr
Was hast du im Backend?
– acdcjunior
22. April 2018 um 18:05 Uhr
node js sir.. Ich muss nur die Daten vom Frontend übergeben
– Wanderer
23. April 2018 um 5:20 Uhr
dieses Video könnte nützlich sein youtube.com/watch?v=327haEC7iFA&t=899s
– göttlich
23. April 2018 um 9:42 Uhr