Laravel 使用 vue3 上传文件

Question

我正在尝试使用 vue3 组合 API 在 Laravel 存储文件夹中上传文件。我已添加代码，但文件未上传。

路由正确，只有 null 值被添加到 mysql 中。

我在 mysql 数据库中有 3 列。

id | file_name | file_path

html

 <input    ref="file" v-on:change="handleFileUpload()"  type="file" />

 <button @click="senddata" class="">UPLOAD</button>

Vue函数：

<script>
import axios from "axios";
import { defineComponent,ref } from 'vue'
export default defineComponent({
  setup() {

      const file = ref(null)
     const handleFileUpload = async() => {
           // debugger;
            console.log("selected file",file.value.files)
            //Upload to server
        }


function senddata() {
    
     axios.post('http://127.0.0.1:8000/api/store-files',{
     file:this.file,
     
      }).then(response=>{
      message=response.data.message; 
      alert(message);

      });
}

    return {
        senddata,
        handleFileUpload,
        file
    };
}
})
</script>

Laravel 商店控制器：

 public function store(Request $request)
    {
 $file=new Files();
  if($request->file()) {
            $file=new Files();
             $file_name = time().'_'.$request->file->getClientOriginalName();
             $file_path = $request->file('file_link')->storeAs('uploads', $file_name, 'public');
 
             $file->file_name = time().'_'.$request->file->getClientOriginalName();
             $file->file_path = '/storage/' . $file_path;
             $file->save();
             return response()->json([
                'message' => 'File  added'
            ]);
        }
}

Answer 1

你不能以json格式发送文件，你需要通过FormData发送

你需要编写类似的代码

html

 <input    ref="file" v-on:change="handleFileUpload"  type="file" />

 <button @click="senddata" class="">UPLOAD</button>

Vue函数

handleFileUpload() {
   const file = ref(null)
   this.file = file.value.files;
}


function senddata() {
    
   let formData = new FormData();
   formData.append('file',file)

     axios.post('http://127.0.0.1:8000/api/store-files',formData).then(response=>{
      message=response.data.message; 
      alert(message);

      });
}

参考链接https://developer.mozilla.org/en-US/docs/Web/API/FormData