使用 Axios 发送文件时出现 500（内部服务器错误）答案

【问题标题】：500 (Internal Server Error) when sending file using Axios使用 Axios 发送文件时出现 500（内部服务器错误）
【发布时间】：2021-11-15 14:23:01
【问题描述】：

我正在尝试在 Laravel 和 Vuejs 中使用 Axios 发送文件。所有数据存储在variantsProd变量下面：

data() {
    return {
        form: new Form({
            variantsProd: [],
            imagesFile: [],
        }),
        
    };
},

variantsProd 包含以下数据：

问题出在imagesFile 属性中。它包含一个文件。如果我将imagesFile 保留为空值[] 它正在工作，则可以发送所有数据。但是，如果我附加图像/秒，我总是得到 500（内部服务器错误）。我不知道为什么会这样？

 let getImg = [];
        this.form.variantsProd.forEach((item) => {
            let totalImagesFile = $('.images' + item.id)[0].files.length; //Total Images
            let imagesFile = $('.images' + item.id)[0];
            for (let i = 0; i < totalImagesFile; i++) {
                getImg.push(imagesFile.files[i]);
            }
            //this.imagesFile = getImg;
            this.form.imagesFile = getImg;
        });

        this.form
            .post('api/staff/products/store', {
                header: {
                    'Content-Type': 'content-type':
                        'multipart/form-data; boundary=---------------------------974767299852498929531610575',
                },
            })
            .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`);
            });

仅供参考：在这种情况下，我使用的是bootstrap-fileinput。

【问题讨论】：

这有帮助吗*.com/questions/54519998/…
@mk21：请查看我的问题。我刚刚更新了一些细节。
如前所述，500 返回码表示服务器不知道如何处理您的请求。也许服务器不知道如何处理二进制文件？也许它期望 images[] 中的简单字符串作为图像 url？您是否有权访问服务器或其任何文档，以便验证服务器端点的预期？
我怎样才能访问服务器或它的任何文档？我将 XAMPP phpmyadmin 用于我的本地主机服务器。我正在尝试寻找另一种解决方案。用这种方式可以吗？ *.com/questions/56215357/…
您将POST 请求发送至api/staff/products/store。您是否拥有/维护此 API？它是什么样子的？此地址是拒绝您请求的地址。

标签： javascript vue.js axios

【解决方案1】：

错误 500 表示服务器不知道如何处理您的请求。确保您的请求与服务器期望的格式相匹配。

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。
请查看我的问题。我刚刚更新了一些细节。

【解决方案2】：

 <input type="file" ref="identity_card" />
 let identity_card = this.$refs.identity_card.files[0];
 form.append("identity_card_image", identity_card);
       axios.post(`api_url`, form)
         .then(response => {
       })

你可以试试。

【讨论】：

如何使用ref？文件本身位于variantsProd 变量中。我想发送所有数据，而不仅仅是文件。
用于单个文件识别的参考
请查看我的问题。我刚刚更新了一些细节。