Laravel 使用 vue3 上传文件

Posted 2023-02-23

【中文标题】Laravel 使用 vue3 上传文件

【英文标题】：Laravel uploading file using vue3

【发布时间】：2022-01-12 06:02:21

【问题描述】：

我正在尝试使用 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'
            ]);
        

【参考方案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

【讨论】：

Thankoyu，我还需要在 html 中添加

在javascript中不需要new FromData

错误：无法读取未定义的属性（读取“目标”）

v-on:change="handleFileUpload" 这里我删除了() 请检查

在 vue 代码下，handleFileUpload(e) ,"expected semicolon after (e)" 如果我​​在 (e) 之后添加分号，则会显示错误；它说 e 没有定义。