如何使用vuex和laravel上传带有标题和描述的文件

// store/modules/fileUpload.js

const state = {
  file: {}
};

const mutations = {
  SET_FILE(state, file) {
    state.file = file;
  }
};

const actions = {
  setFile({ commit }, file) {
    commit('SET_FILE', file);
  }
};

export default {
  state,
  mutations,
  actions
};

// YourVueComponent.vue

<template>
  <div>
    <input type="file" @change="handleFileChange" />
    <input type="text" v-model="file.title" placeholder="Title" />
    <input type="text" v-model="file.description" placeholder="Description" />
    <button @click="uploadFile">Upload</button>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';

export default {
  computed: {
    ...mapState('fileUpload', ['file'])
  },
  methods: {
    ...mapActions('fileUpload', ['setFile']),
    handleFileChange(event) {
      const file = event.target.files[0];
      this.setFile({ ...this.file, file });
    },
    uploadFile() {
      // 使用Laravel的API来上传文件，可以使用axios或其他HTTP库发送POST请求
      // 在请求中包含标题和描述信息
      const formData = new FormData();
      formData.append('file', this.file.file);
      formData.append('title', this.file.title);
      formData.append('description', this.file.description);

      // 发送请求并处理响应
      // 请根据你的实际情况进行相应的处理
      axios.post('/api/upload', formData)
        .then(response => {
          // 处理成功响应
        })
        .catch(error => {
          // 处理错误响应
        });
    }
  }
};
</script>