解决Vue.js中formData为空的问题：异步操作导致数据未填充

在Vue.js中，使用FormData上传文件时，可能会遇到formData为空的问题。这是因为在代码中，对于formData的操作是在Promise.all的回调函数中进行的，而Promise.all是一个异步操作，需要等待所有的Promise完成后才会执行回调函数。所以在console.log(formData)的时候，Promise.all的回调函数还没有执行，formData还没有被填充。

如果想要查看formData的内容，需要将console.log(formData)放到Promise.all的回调函数中。

const fileList = reactive([
    {
        'name': 'food.jpeg',
        'url': 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },

    {
        'name': 'food.jpeg',
        'url': 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },

    {
        'name': 'food.jpeg',
        'url': 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },

    {
        'name': 'food.jpeg',
        'url': 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },

])
const formData = new FormData();
const promises = fileList.map(item =>
    fetch(item.url)
        .then(response => response.blob())
        .then(blob => new File([blob], 'image.jpg'))
);

Promise.all(promises).then(files => {
    files.forEach(file => {
        formData.append('file', file);
    });
    console.log(formData); // 将console.log(formData)放到Promise.all的回调函数中
});
console.log(fileList);
const res = await proxy.Api.uploadPhoto(formData); // 这里为什么formdata打印出来为空

通过将console.log(formData)放到Promise.all的回调函数中，就可以在formData被填充后查看其内容了。