在 Vue Js 中使用 vform 进行验证

Question

我在我的应用程序中使用 Vue Js 和 Laravel。我的代码有产品和图像。我可以使用 axios 上传图像，但是当我添加 vform 来验证我的所有图像时，没有图像被传递给控制器​​。当我将 axios.post('/senddata', formData, config) 交换为 this.form.post('/senddata', formData, config) 时，传递了其他数据，但图像为空。 这是我的代码；

             saveImageData(){
              var self=this;
              const config = {
                    headers: { 'content-type': 'multipart/form-data' }
                }
                document.getElementById('upload-file').value=[];
                let formData = new FormData();
                formData.append('title', this.form.title);
                formData.append('description', this.form.description);
                formData.append('location', this.form.location);
                formData.append('price', this.form.price);
                 for(let i=0;i<this.form.images.length;i++){
                formData.append('images[]', this.form.images[i]);
                 }
 
              axios.post('/senddata', formData, config)
                .then(function (response) {
                })
                .catch(function (error) {
                });

Answer 1

查看此文档以获取 GitHub 中的 vform 示例，该示例将指导您上传带有其他输入字段的图像：

https://github.com/cretueusebiu/vform/blob/master/example/upload.html

我认为这个示例方法可以解决您的问题：

    selectFile (e) {
          const file = e.target.files[0]

          // Do some client side validation...

          this.form.file = file

          this.form.submit('post', '/upload', {
              // Transform form data to FormData
              transformRequest: [function (data, headers) {
                return objectToFormData(data)
              }],

              onUploadProgress: e => {
                // Do whatever you want with the progress event
                // console.log(e)
              }
            })
            .then(({ data }) => {
              // ...
            })
        }