在 Vuejs 和 Laravel 中上传文件以及动态输入字段答案

【问题标题】：Upload files along with dynamic input fields in Vuejs and Laravel在 Vuejs 和 Laravel 中上传文件以及动态输入字段
【发布时间】：2020-02-28 04:42:05
【问题描述】：

我正在保存从动态输入字段添加的多条记录。现在我想将文件添加到每个输入字段。目前我正在做的是将所有记录存储在对象数组中，并在添加文件时将其附加到数组中的相关对象。我正在从子组件添加动态字段。我附上了动态添加字段的截图，当点击添加新时，它会生成一行。

我的代码到此为止

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，我想在上面的对象数组中传递每个文件。

【问题讨论】：

为什么要求不使用 Base64？您将这些文件内容存储在哪里？请注意，对于网络流量，Base64 比 byte[] 小（如果使用 Json 格式）
@JonathanLarouche 当我保存它时给我一个错误，例如 file_put_contents(/home/madusanka/....../public/{name}.pdf): failed to open stream: No这样的文件或目录
错误看起来像目录/文件系统访问问题。您的服务器是否对 .../pulbic/ 路径具有写入/创建权限？错误还在您的路径中显示 {name}，它是否错过了一些替换？
是的，我修好了
它是否也解决了整个问题？

标签： javascript laravel vue.js

【解决方案1】：

您需要结合使用FileList 和FormData API 来存储和提交文件信息。

根据您的需要，设置可能是一件相当复杂的事情。这是一个很好的设置 Vue 上传文件的指南，它涵盖了很多场景并提到了如何发送带有其他数据的文件：
https://serversideup.net/uploading-files-vuejs-axios/

【讨论】：

@Turbotails 是的，我阅读了该参考资料，它描述了有关添加多个文件的信息。不是要在每个动态输入字段中添加一个文件。

【解决方案2】：

我通过更新控制器功能修复了错误

 $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'),
        ],

效果很好

【讨论】：