0

带有图片上传和标题/描述输入的简单表单

<template>
  <div class="upload-form">
    <form action="api/album" method="POST" enctype="multipart/form-data">
      <div class="form-group">
        <label for="title">Title</label>
        <input
          v-bind="form.title"
          type="text"
          class="form-control"
          id="title"
          required
        />
      </div>
      <div class="form-group">
        <label for="description">description</label>
        <input
          v-bind="form.Description"
          type="text"
          class="form-control"
          id="description"
          required
        />
      </div>

      Upload a cover image here
      <vue-dropzone
        ref="dropzoneJs"
        id="dropzone"
        :options="options"
        v-on:vdropzone-sending="sendingEvent"
      ></vue-dropzone>
      <button
        v-on:click="processQueue"
        id="upload"
        type="submit"
        class="btn btn-primary"
      >
        Upload
      </button>
    </form>
  </div>
</template>

<script>
import vueDropzone from "vue2-dropzone";

export default {
  data() {
    return {
      options: {
        url: "http://127.0.0.1:8000/api/album",
        addRemoveLinks: true,
        maxFiles: 1,
        maxFilesize: 4,
        autoProcessQueue: false,
        dictDefaultMessage: '<i class="fas fa-cloud-upload-alt"></i>UPLOAD',
      },
      form: {
        title: "",
        Description: "",
      },
    };
  },
  components: {
    vueDropzone: vueDropzone,
  },

  methods: {
    processQueue() {
      this.$refs.dropzoneJs.processQueue();
    },
    sendingEvent(file, xhr, formData) {
      formData.append("title", this.form.title);
      formData.append("description", this.form.Description);
    },
  },
};
</script>

<style scoped>
#upload {
  margin-top: 5px;
}
.upload-form {
  margin-top: 75px;
}
</style>

表单通过此路由发送到 laravel 后端控制器

Route::post('/album', [AlbumController::class, 'store'])->name('album.post');

控制器内部的方法只是转储请求变量

public function store(Request $request)
    {
        dd($request);
    }

上传到达 POST 端点并打印出 $request 变量，但里面没有标题、描述或图像。

4

1 回答 1

0

经过反复试验，我找到了解决方案

1：我删除了表单标签

2：我使用 v-model 而不是 v-bind

3：将我的选项对象内的 URL 更改为 api/album

这些更改似乎解决了我的问题， dd($request) 现在打印标题/描述和文件

于 2021-01-20T11:25:19.920 回答