组件。通过 vue.http.post() 发送带有文件的请求

Question

我在页面上有 vuejs2 组件（单文件组件）。这是一个简单的 bootstrap 模态 window，只有一个文件输入。我只需要上传一个文件（不需要多文件上传等）

文件内容：

<template>
<div class="modal fade" id="upload-file-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Upload file</h4>
            </div>
            <form id="app-file-upload-form" name="appFileUploadForm" @submit.prevent="uploadAppFile" novalidate enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="app-file-fileinput">File</label>
                        <input type="file" name="file" id="app-file-fileinput" class="form-control" v-el="file" @change="attachFile">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Upload</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
export default {
    data() {
        return {
            file: ''
        }
    },

    methods: {
        attachFile(e) {
            var files = e.target.files || e.dataTransfer.files;

            if (!files.length)
                return;

            this.file = files[0];
        },

        uploadAppFile() {
            console.log(this.file);
            Vue.http.post('/api/v1/apps/' + this.appId + '/files', { file: this.file}).then((response) => {
                console.log(response);
            }, (response) => {
                console.log(response);
            });
        }
    }
}

所以我有 laravel 控制器来处理它。

public function upload(Request $request)
{
    $attachedFile = $request->file;

    return response()->json($request->all());
}

我放了 return response->json() 来调试一下。当我附加文件时，文件附加到组件（模型？）字段而不是空的。但是当 vue.http.post 发生时，文件变为空对象。

首先是console.log(文件) 其次是服务器响应。

我也尝试过使用 FormData()...它没有用。 ps: 我从代码中删除了版本字段。

Answer 1

在使用 formdata 几次后，我可以上传文件了。只需将变量放入方法中即可。

uploadAppFile() {
    let data = new FormData();
    data.append('file', this.file);

    Vue.http.post('/api/v1/apps/' + this.appId + '/files', data).then((response) => {});
}