Multi tool use

Clash Royale CLAN TAG

VueJs Axios Post FormData Parameters

We are using Vue in our frontend application, and for one of our REST service our backend server expects to have the below data structure:

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;
}


And in our Vuejs application we tried to post the data as in the below code:

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");
}



},


But when we use this code (even if the photo-image was null) the backend server returns HTTP 500 error. Because the products array seems null.
I wasn't able to figure it out where the problem may be in the Vuejs code?

Does anyone have any idea about that?

1 Answer
1

Your issue is probably il the formData.append("products",prod) method of your FormData class, try changing formData.append("products",prod) with formData.products.push(prod).

formData.append("products",prod)

FormData

formData.append("products",prod)

formData.products.push(prod)

Furthermore in your axios call the payload should be formData.products if you API endpoint expects the products right?
Try axios.post(${API_URL}/company/uploadProducts, formData.products, header).

axios.post(

, formData.products, header)

I do not see any syntax issue relative to Vue, hope this helps. (And of course check what is sent by XHR in devtools as suggested in the comments)

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.