使用nuxtjs和filepond将图像发送到laravel API

npm install filepond filepond-plugin-file-validate-type filepond-plugin-image-preview

import { FilePond, registerPlugin } from 'filepond';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';

registerPlugin(FilePondPluginFileValidateType, FilePondPluginImagePreview);

<template>
  <div>
    <FilePond v-model="files" name="image" />
    <button @click="uploadImage">上传图像</button>
  </div>
</template>

export default {
  data() {
    return {
      files: []
    };
  },
  methods: {
    uploadImage() {
      const formData = new FormData();
      formData.append('image', this.files[0].file);

      // 使用Axios或其他HTTP库发送POST请求到Laravel API
      // 以下是一个示例：
      axios.post('https://api.example.com/upload', formData)
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};

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

class ImageController extends Controller
{
    public function upload(Request $request)
    {
        if ($request->hasFile('image')) {
            $image = $request->file('image');
            // 处理图像上传逻辑，例如保存到服务器或存储到云存储服务
            return response()->json(['success' => true]);
        }

        return response()->json(['success' => false]);
    }
}