上传文件，文件路径为空，VueJs / Laravel答案

【问题标题】：Upload File, file path null, VueJs / Laravel上传文件，文件路径为空，VueJs / Laravel
【发布时间】：2020-02-05 12:14:56
【问题描述】：

我尝试使用 Vuejs 和 Laravel 创建一个简单的文件上传。但是我的“文件”变量在发布时似乎为空。

<b-form-group label-for="file">
    <b-form-file
        v-model="file"
        id="file"
        :state="Boolean(file)">
        </b-form-file>
</b-form-group>

data() {
    return {
        file: null,
    },
}

还有一个 post 方法。（适用于表格的其余部分）

addContract(newContract) {
    post("/contracts/" + `${this.customer_id}`, newContract)
        .then((response) => {
            //
        }
        .catch(error){
            //
        }
}

控制器

//code
    $fileName = time(). '.' .$request->$file->getClientOriginalExtention();
    $request->file->move(public_path('upload'), $fileName);
    dd($fileName);  
//code

更新我设置了axios标头，但是现在我得到了错误422，当它是应用程序时我没有，但它仍然不起作用。

 headers: {
    'Content-Type': 'multipart/form-data'
 }

【问题讨论】：

您是否在表单中添加了enctype="multipart/form-data"？
不，我必须添加这个？
是的，您必须添加它，否则您将无法使用 post 请求发送文件。见here
我添加了 from 标签，我也尝试过这个例子。仍然，我得到了空值。
我不知道您的 post() 方法是做什么的，但您可能必须将 multipart/form-data 设置为您的 post() 方法中的标题。

标签： laravel forms vuejs2 bootstrap-vue

【解决方案1】：

为了通过本机浏览器提交上传文件，您必须为文件输入提供name（以及将enctype="multipart/form-data" 添加到封闭的<form> 元素）。

<b-form-file
  v-model="file"
  id="file"
  name="file"
  :state="Boolean(file)">
</b-form-file>

这对于任何形式的<input>、<select> 或<textarea> 控件都是相同的要求。

【讨论】：

相同的输出。在将请求放入控制台日志之前，我得到了 "file: ..." ，但是在请求 "file: {}" 和 'Content-Type': 'multipart/form-data' 中，我得到了 422，用于验证，但是通过应用程序验证（对于其余的输入是正确的。）