Laravel结合Vue使用Axios上传文件时报500 Internal Server Error问题求解

问题修复方案 #

1. 修复请求头配置错误 #

你当前的header配置存在两处严重问题：一是语法错误，重复声明了Content-Type键名；二是手动硬编码boundary完全没有必要，Axios发送FormData格式请求时会自动生成正确的Content-Type头和对应boundary，手动写死会直接导致服务端无法解析表单内容。

2. 所有参数必须用FormData封装后传输 #

默认情况下普通POST请求使用application/json格式，无法传输二进制文件，这是上传图片就返回500的核心原因，你需要把所有请求参数封装进FormData对象再发送，参考修改后的代码：

let getImg = [];
this.form.variantsProd.forEach((item) => {
    let totalImagesFile = $('.images' + item.id)[0].files.length;
    let imagesFile = $('.images' + item.id)[0];
    for (let i = 0; i < totalImagesFile; i++) {
        getImg.push(imagesFile.files[i]);
    }
});
// 循环结束后统一赋值，不要在循环内重复赋值
this.form.imagesFile = getImg;

// 新建FormData封装所有参数
const formData = new FormData();
// 普通数组类参数转json字符串后append
formData.append('variantsProd', JSON.stringify(this.form.variantsProd));
// 图片文件循环append
this.form.imagesFile.forEach((file, index) => {
    formData.append(`imagesFile[${index}]`, file);
});
// 其他表单参数也要逐个append进FormData
formData.append('isVariantExists', this.form.isVariantExists);

// 发送请求，不要手动加Content-Type头
this.form.post('api/staff/products/store', formData)
.then((response) => {
    // 原有业务逻辑不变
    console.log(response);
    if (this.form.isVariantExists > 0) {
        this.validateVariants(response);
    } else {
        this.$router.push({ name: 'products-index' });
        this.showSuccessMsg(response);
    }
})
.catch((error) => {
    console.log(error);
    swal.fire({
        icon: 'error',
        title: 'Oouch...',
        text: 'Something went wrong! Make sure you input the valid data!',
        footer: '<a href>Why do I have this issue?</a>',
    });
})
.finally(() => {
    $('#loadingButton').attr('disabled', false);
    $('.proc-regis').remove();
    $('#loadingButton').html(`Save`);
});

3. Laravel后端适配调整 #

后端接收参数时需要先把json格式的普通参数转成数组再处理：

// 接收参数
$variantsProd = json_decode($request->input('variantsProd'), true);
$imagesFile = $request->file('imagesFile');
// 后续按照正常逻辑做验证、存储即可

4. 剩余500错误排查方案 #

如果修改后依然报错，直接查看Laravel项目storage/logs/laravel.log下的错误日志精准定位问题，常见排查点：

• 检查图片验证规则是否匹配你上传的文件大小、格式、数量要求
• 检查图片存储目录是否开启了写入权限
• 检查php.ini配置的upload_max_filesize和post_max_size是否大于你上传的图片总大小
• 确认bootstrap-fileinput插件的配置是否和你当前的手动上传逻辑冲突，有没有开启自动上传等干扰配置

内容的提问来源于stack exchange，提问作者Cheer Up