Laravel 在提交包含图像和数据的表单时显示必需的错误消息

Question

关于

我正在使用 vue.js 和 Laravel 5.8 提交纯文本图像。

错误详情

当我使用 axios 提交数据时，它会给出需要产品名称的验证错误消息。我正在提交名称和图像。 当我禁用提交图片的代码时一切正常。

Request Header - 请点击图片查看更多详情

Payload - 请点击图片查看更多详情

HTML

<template>
    <div>
        <input name="Product Name" type="text" v-model="saveForm.product_name">
        <input type="file" accept="image/*" name="product_image" />
        <button type="button" @click="store()">Save</button>        
    </div>
</template>

脚本

<script>
    export default {
        data() {
            return {
                saveForm: {
                    product_name: '', product_image: null
                }
            };
        },
        methods: {            
            store() {
                var config = { 
                    headers : {
                        'Content-Type': 'multipart/form-data', 'processData': false
                    }
                };
                var fileData = new FormData();
                fileData.append("product_image", this.saveForm.product_image);
                fileData.append("product_name", this.saveForm.product_name);
                axios.post("my route", this.saveForm, config).then(response => {
                    if(response.data.Status) {}
                })
                .catch(error => { //console.log(error);
                });
            }
        }
    }
</script>

Laravel Controller 操作方法

public function Create(CreateProductRequest $request) {
    //Code here
}

Laravel 请求类

class CreateProductRequest extends Request
{
    public function wantsJson() {
        return true;
    }

    public function rules() {
        return [
            'product_name'  => 'required',
            'product_image' => "image|mimes:bmp,png,jpg,gif,jpeg"
        ];
    }
}

Answer 1

好的，让我们逐步检查您的代码。

1) 您需要在标题中添加“边界”。它不太重要，但对于服务器来说是必需的。

headers: {
  "Content-type":
    "multipart/form-data; charset=utf-8; boundary=" +
    Math.random()
      .toString()
      .substr(2),
  processData: false,
  Accept: "application/json"
}

2) 为什么你通过“new FormData()”准备数据，却用“this.saveForm”发送？正确代码:

axios.post("my route", fileData, config)
  .then(response => {
    if (response.data.Status) {}
  })
  .catch(error => { //console.log(error);
  });

3) 当你按照我上面说的做所有事情时，你会得到图像错误，因为你没有通过它。我添加了发送图像的功能。

总结:

HTML

<div>
  <input
    name="Product Name"
    type="text"
    v-model="saveForm.product_name"
  >
  <input
    type="file"
    accept="image/*"
    name="product_image"
    @change="uploadImage"
  />
  <button
    type="button"
    @click="store()"
  >Save</button>
</div>

脚本

export default {
  data() {
    return {
      saveForm: {
        product_name: "",
        product_image: null
      }
    };
  },
  methods: {
    store() {
      var config = {
        headers: {
          "Content-type":
            "multipart/form-data; charset=utf-8; boundary=" +
            Math.random()
              .toString()
              .substr(2),
          processData: false,
          Accept: "application/json"
        }
      };
      var fileData = new FormData();
      fileData.append("product_image", this.saveForm.product_image);
      fileData.append("product_name", this.saveForm.product_name);
      axios
        .post("my route", fileData, config)
        .then(response => {
          if (response.data.Status) {
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    uploadImage(e) {
      this.saveForm.product_image = e.target.files[0];
    }
  }
};