如何使用axios将图像/文件从Vue js上传到Laravel7

npm install axios

import axios from 'axios';

methods: {
  handleFileUpload() {
    let formData = new FormData();
    formData.append('file', this.file); // 假设你的文件在Vue.js组件中的data属性中定义为this.file

    axios.post('/upload', formData)
      .then(response => {
        console.log(response.data);
        // 处理上传成功后的逻辑
      })
      .catch(error => {
        console.log(error);
        // 处理上传失败后的逻辑
      });
  }
}

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

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UploadController extends Controller
{
  public function upload(Request $request)
  {
    if ($request->hasFile('file')) {
      $file = $request->file('file');
      $path = $file->store('uploads'); // 文件存储到storage/app/uploads目录下
      return response()->json(['path' => $path]);
    }

    return response()->json(['message' => 'No file uploaded.'], 400);
  }
}

php artisan serve