Я сохраняю несколько записей, добавленных из полей ввода Dynami c. Теперь я хочу добавить файл в каждое поле ввода. В настоящее время я занимаюсь сохранением всех записей в массиве объектов, и при добавлении файла он добавляется к соответствующему объекту в массиве. Я добавляю динамические c поля из подкомпонента. Я прикрепил снимок экрана с полями динамического добавления c, когда нажимаю кнопку добавить новый, он генерирует строку.
Мой код пока что
SubCOmponent.vue
<button @click="addNewDocument"
class="btn m-btn--pill btn-outline-success m-btn m-btn--custom"
type="button">
{{ $t("Add New") }}
</button>
<div v-for="document in documentArray ">
<div class="form-group m-form__group row">
<div class="col-lg-4">
<input
type="text"
class="form-control m-input"
v-model="document.document_description"
/>
</div>
<div class="col-lg-4">
<div class="custom-file">
<input
type="file" ref="file"
@change="setFile(document.id,$event)"
accept=".json/*"
v-bind:id="document.id"
/>
</div>
</div>
<div class="col-lg-4">
<a
class="btn btn-outline-danger m-btn m-btn--icon m-btn--icon-only m-btn--pill fd-delete-btn"
@click="deleteDocument(document)">
<i class="fas fa-trash"></i>
</a>
</div>
</div>
</div>
data() {
return {
deleted_record_ids: [],
documentArray: [],
row_id:0,
}
},
methods:{
addNewDocument() {
let self = this;
self.models.document_description = '',
self.models.document_file = '',
self.documentArray.push(
{
id: 'new_' + self.row_id,
document_description: self.models.document_description,
}
);
self.row_id++;
},
setFile(id, e) {
let self = this;
let reader = new FileReader();
reader.readAsDataURL(e.target.files[0]);
reader.onload = function () {
self.documentArray.forEach(function (element) {
element.File = reader.result;
});
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
self.$emit('document-list', self.documentArray);
},
deleteDocument(document) {
let self = this;
let i = 0;
this.documentArray.forEach(function (item) {
if (item.id == document.id) {
self.documentArray.splice(i, 1);
self.deleted_record_ids.push({deleted_record_id: document.id});
}
i++;
});
self.$emit('deleted-documents', self.deleted_record_ids);
},
ParentComponent.vue
submit(){
let formData = new FormData();
formData.append('document_details', JSON.stringify(this.document_details));
passing object array looks like
[
{
"id": new_0,
"document_description": "sdvsdv",
"file_name": null,
"File":"data:application/pdf;base64,JVBERi0xLjQKJcOkw7zDtsOf......."
},
{...},
{...}...
}
]
in my laravel controller
$file = $document_detail['File'];
$file = str_replace('data:application/pdf;base64,', '', $file);
$file = str_replace(' ', '+', $file);
$fileName = 'file.pdf';
\File::save(storage_path(). '/public/' . $fileName, base64_decode($file));
Я делаю это преобразовать файл в Base64 и передать его, как указано выше. То, что я хочу сделать, это без преобразования файла в Base64, я хочу передать каждый файл в массиве объектов выше.