在 Vue Js 中使用 vform 进行验证

如何解决在 Vue Js 中使用 vform 进行验证

我在我的应用程序中使用 Vue Js 和 Laravel。我的代码有产品和图片。我可以使用 axios 上传图像，但是当我添加 vform 来验证我的所有图像时，没有图像传递给控制器​​。当我将 axios.post('/senddata',formData,config) 交换到 this.form.post('/senddata',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',config)
                .then(function (response) {
                })
                .catch(function (error) {
                });

解决方法

查看 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 }) => {
              // ...
            })
        }