Laravel文件上传不起作用：在字符串上调用成员函数getClientOriginalName（）

Question

我正在尝试从输入字段中上传文件。我有以下字段：

<tr>
 <td>
  <input id="item" class="form-control-file my-2 w-100" type="file">
 </td>
 <td>
  <input id="remark" class="form-control my-2 w-100" type="text">
 </td>
</tr>

然后是我的axios帖子：

self.$http.post('http://127.0.0.1:8000/api/item/new', {
 batchcode: document.getElementById("batchcode_form").value, // is somewhere else in the code, works fine.
 product_code: document.getElementById("item").files[0].name,
 remark: document.getElementById("item"),
 input_type: 'item'
}).then(function (response) {
 if (response.data.status === 'success') {
 // success
} else {
 // failed
}
});

标题显示以下数据：

batchcode“我填写的batchcode”

input_type：“文件”

product_code：“ filenamewithoutpath.png”

备注：“我填写的备注”

现在我的itemscontroller中有以下代码：

    public function store(Request $request)
    {
        if ($request->product_code != "" && $request->remark != "") {
            // create item
            $item = new Item;
            $item->batchcode = $request->batchcode;
            $item->remarks = $request->remark;
            if ($request->input_type === "file") {
                // upload file
                $file = $request->product_code;
                $item->product_code = $file->getClientOriginalName();
                $new_name = time().$file->getClientOriginalName();
                $path = public_path() . '/uploads/';
                $file->move($path, $new_name);
                $item->product_code = '/uploads/' . $new_name;
            } else {
            $item->product_code = $request->product_code;
            }
            $item->save();
            return response()->json([
                'status' => 'success',
                'data' => $item
            ]);
        } else {
            return response()->json([
                'status' => 'error',
                'data' => 'Not all data was given.'
            ]);
        }
    }

执行此操作时，出现以下错误：Call to a member function getClientOriginalName() on string

我获得了正确的文件名，但是上传部分无法正常工作。我无法在Google上找到或找到任何东西，为什么它不起作用。

Answer 1

您可以使用FormData。示例：

let payload = new FormData()

然后将字段添加到您要发送的表单中：

payload.set('input_type', 'item')

如果要上传图像或文件，则可能要使用.append

payload.append('remark', imageFile); 

然后您可以使用axios post方法（可以相应地对其进行修改）

self.$http.post('http://127.0.0.1:8000/api/item/new', {
     data: bodyFormData,
     headers: {'Content-Type': 'multipart/form-data' }
})
.then(function (response) {
    //handle success
    console.log(response);
})
.catch(function (response) {
    //handle error
    console.log(response);
});