Question

我们在前端应用程序中使用Vue，对于我们的REST服务之一，我们的后端服务器（使用spring和java）期望具有以下数据结构：

public class MAProductsUploadRequest
{
    public List<MAProductUploadRequest> products;
}

public class MAProductUploadRequest {

    public String productName;
    public String productDescription;
    public double productPrice;
    public int productOrder;
    public MultipartFile productImage=null;
    public double cropX;
    public double cropY;
    public double cropWidth;
    public double cropHeight;
    public int categoryId;
}

在我们的Vuejs应用程序中，我们尝试按以下代码发布数据：

      addProducts: function () {
        console.log("Add Products Working. Total Product Count:"+this.excelProducts.length);
        let header = {
          headers: auth.getAuthHeader()
        };

        let formData = new FormData();

        for (let i=0;i<this.excelProducts.length;i++ ) {

           console.log("Starting loop:"+i);
           var prod = this.excelProducts[i];
           console.log("Product Before:"+prod);
           if (document.getElementById('photo-image-'+i) !== null) {
             if(document.getElementById('photo-image-'+i).files.length !== 0) {
               console.log("Getting Image For Prod");
               prod.productImage = document.getElementById('photo-image-'+i).files[0] ;
             }
           }

          prod.cropX = this.cropProp.x;
          prod.cropY = this.cropProp.y;
          prod.cropWidth = this.cropProp.width;
          prod.cropHeight = this.cropProp.height;
          prod.rotate = this.cropProp.rotate;


          console.log("Product After:"+prod);
          formData.append("products[]",prod);

        }

        for (var pair of formData.entries()) {
          console.log(pair[0]+ ', ' + pair[1]);
        }

        //console.log("Form Data:"+formData.products);

        if (formData.products !== null) {
          axios.post(`${API_URL}/company/uploadProducts`, formData, header).then((response) => {
            logForDevelopment(response);
            this.getProducts();
            this.product = {
              id: '',
              name: '',
              description: '',
              price: '',
              photo: '',
              isEdit: false
            };
            this.excelProducts = [];
            this.isPhotoChosen = false;
            this.isPhotosChosen = [];
            this.cropImg = '';
            document.getElementById('photo-image').value = null;
            this.isLoading = false;
          }).catch((error) => {
            this.isLoading = false;
            if(error.response) {
              logForDevelopment(error);
              document.getElementById('photo-image').value = null;
              if(error.response.status === 401 || error.response.status === 403) {
                auth.afterInvalidToken('login');
              }
            }
          })
        }  else {
          console.log("Form Data Is Empty");
        }



      },

但是，当我们使用此代码时（即使照片图像为空），后端服务器也会返回HTTP 500错误。因为产品数组似乎为空。我无法弄清楚Vuejs代码中的问题可能在哪里？

编辑：（我也尝试了以下代码，但结果仍然相同）

      addProducts: function () {
        console.log("Add Products Working. Total Product Count:"+this.excelProducts.length);
        let header = {
          headers: auth.getAuthHeader()
        };

        let formData = new FormData();
        let prods = [];

        for (let i=0;i<this.excelProducts.length;i++ ) {

           console.log("Starting loop:"+i);
           let prod = this.excelProducts[i];


           let subFormData = new FormData();
           subFormData.append("productName",prod.productName);
           subFormData.append("productDescription",prod.productDescription);
           subFormData.append("productPrice",prod.price);
           subFormData.append("categoryId",prod.categoryId);
           subFormData.append("cropX",this.cropProp.x);
           subFormData.append("cropY",this.cropProp.y);
           subFormData.append("cropWidth",this.cropProp.width);
           subFormData.append("cropHeight",this.cropProp.height);

           prods.push(subFormData);



           if (document.getElementById('photo-image-'+i) !== null) {
             if(document.getElementById('photo-image-'+i).files.length !== 0) {
               console.log("Getting Image For Prod");
               subFormData.productImage = document.getElementById('photo-image-'+i).files[0] ;
             }
           }


        }

        formData.append("products",prods);

        console.log("Form Data:"+formData);

        if (formData.products !== null) {
          axios.post(`${API_URL}/company/uploadProducts`, formData, header).then((response) => {
            logForDevelopment(response);
            this.getProducts();
            this.product = {
              id: '',
              name: '',
              description: '',
              price: '',
              photo: '',
              isEdit: false
            };
            this.excelProducts = [];
            this.isPhotoChosen = false;
            this.isPhotosChosen = [];
            this.cropImg = '';
            document.getElementById('photo-image').value = null;
            this.isLoading = false;
          }).catch((error) => {
            this.isLoading = false;
            if(error.response) {
              logForDevelopment(error);
              //document.getElementById('photo-image').value = null;
              if(error.response.status === 401 || error.response.status === 403) {
                auth.afterInvalidToken('login');
              }
            }
          })
        }  else {
          console.log("Form Data Is Empty");
        }



      },

我实际上想达到的目的是，当将单个产品信息发送到我们的后端服务时，我们下面的代码可以正常工作，但是我想将其设置为数组，以便一次发送多个产品：

      addProduct: function () {

        let header = {
          headers: auth.getAuthHeader()
        };

        let formData = new FormData();

        formData.append('productName', this.product.name);
        formData.append('productDescription', this.product.description === '' ? "" : this.product.description);
        formData.append('productPrice', this.product.price);
        formData.append('categoryId', this.product.categoryId);
        if(document.getElementById('photo-image').files.length !== 0) {
          formData.append('productImage', document.getElementById('photo-image').files[0]);
        }
        formData.append('cropX', this.cropProp.x);
        formData.append('cropY', this.cropProp.y);
        formData.append('cropWidth', this.cropProp.width);
        formData.append('cropHeight', this.cropProp.height);
        formData.append('rotate', this.cropProp.rotate);

        console.log(formData);

        axios.post(`${API_URL}/company/products`, formData, header).then((response) => {
          logForDevelopment(response);
          this.getProducts();
          this.product = {
            id: '',
            name: '',
            description: '',
            price: '',
            photo: '',
            isEdit: false
          };
          this.isPhotoChosen = false;
          this.cropImg = '';
          document.getElementById('photo-image').value = null;
          this.isLoading = false;
        }).catch((error) => {
          this.isLoading = false;
          if(error.response) {
            logForDevelopment(error);
            document.getElementById('photo-image').value = null;
            if(error.response.status === 401 || error.response.status === 403) {
              auth.afterInvalidToken('login');
            }
          }
        })

      },

有人对此有任何想法吗？

您还可以在下面查看我的应用程序的屏幕截图（我想一次发送屏幕截图中的所有项目）

Answer 1

您的问题可能是您的formData.append("products[]",prod)类的FormData方法，请尝试将formData.append("products[]",prod)更改为formData.products.push(prod)。

如果您的API端点期望乘积正确，那么在axios调用中，有效载荷应该是formData.products？尝试使用axios.post( $ {API_URL} / company / uploadProducts , formData.products, header)。

我没有看到有关Vue的任何语法问题，希望这会有所帮助。（当然，请按照注释中的建议检查XHR在devtools中发送的内容）

VueJs Axios Post FormData参数

1 个答案: