如何将带有文件的formData (包括文件和字符串数据)从Vue发送到Laravel API

<template>
  <form @submit="submitForm">
    <input type="text" v-model="formData.name" />
    <input type="file" ref="fileInput" />
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        file: null,
      },
    };
  },
  methods: {
    submitForm(event) {
      event.preventDefault();
      const formData = new FormData();
      formData.append('name', this.formData.name);
      formData.append('file', this.$refs.fileInput.files[0]);
      
      // 发送formData到Laravel API
      // 使用axios或其他HTTP库发送POST请求
    },
  },
};
</script>

npm install axios

import axios from 'axios';

// ...

methods: {
  submitForm(event) {
    event.preventDefault();
    const formData = new FormData();
    formData.append('name', this.formData.name);
    formData.append('file', this.$refs.fileInput.files[0]);

    axios.post('/api/upload', formData)
      .then(response => {
        // 处理响应
      })
      .catch(error => {
        // 处理错误
      });
  },
},

// routes/api.php

Route::post('/upload', 'UploadController@upload');

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UploadController extends Controller
{
    public function upload(Request $request)
    {
        // 获取上传的文件
        $file = $request->file('file');
        
        // 获取其他表单数据
        $name = $request->input('name');
        
        // 执行文件上传逻辑
        // ...
        
        return response()->json(['message' => '文件上传成功']);
    }
}