Загружайте файлы вместе с полями ввода Dynamic c в Vuejs и Laravel - PullRequest
1 голос
/ 28 февраля 2020

Я сохраняю несколько записей, добавленных из полей ввода 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, я хочу передать каждый файл в массиве объектов выше.

enter image description here

Ответы [ 2 ]

0 голосов
/ 05 марта 2020

я исправил ошибку с обновлением функции контроллера как

 $file = str_replace('data:application/pdf;base64,', '', $file);
        $base = base64_decode($file);
        $fileName = uniqid().'pdf';
        Storage::disk('documents')->put($fileName, $base);
        return $fileName;

in root->config->filesystems.php
'mason_documents' => [
            'driver' => 'local',
            'root' => storage_path('app/documents'),
        ],

, и она отлично работает

0 голосов
/ 28 февраля 2020

Вам нужно использовать комбинацию API FileList и FormData для хранения и отправки информации о файле.

Это может быть довольно сложной задачей для установки вверх, в зависимости от ваших потребностей. Вот хорошее руководство по настройке Vue с загрузкой файлов, оно охватывает множество сценариев ios и упоминает, как отправлять файлы с другими данными:
https://serversideup.net/uploading-files-vuejs-axios/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...