在邮递员中上传文件有效，但在 axios 中会引发 500 错误

Posted 2023-03-10

【中文标题】在邮递员中上传文件有效，但在 axios 中会引发 500 错误

【英文标题】：uploading file in postman works but in axios it throws 500 error

【发布时间】：2021-05-16 09:46:01

【问题描述】：

伙计们，我的后端正在工作，我可以在邮递员中发送带有表单数据的图像文件，但在我的客户端使用 axios，我给出了 multipart/form-data 的标题，它在邮递员中抛出 "statusCode":500,"message":"Internal server error" 内容类型是：

content-type: multipart/form-data; boundary=<calculated when request is sent>

我的 axios 代码：

  PostNormalProductsFromServer(context,formData,tokenSend) 
const config = 
  headers:  
            'Authorization': `$tokenSend`,
            'Content-Type': 'multipart/form-data'
 
 
 axios.post('/api/product',addEnamel,config).then(response=>
   if (response.status == 201) 
     alert(response.status)
     console.log(response.data)
     console.log(addEnamel.file)
   
 ).catch(error => 
   if (error.response && error.response.status === 400) 
       alert("error.response")
   
   else if(error.response && error.response.status === 401)
     console.log(tokenSend)
   
 ) ,

我从组件发送到 formData 的数据：

var formData = new FormData();
formData.append("name", this.productname);
        formData.append("price", parseInt(this.price));
        formData.append("discount", parseInt(this.discount));
        formData.append("average_rating", this.way);
        formData.append("average_rating", 4);
        formData.append("texture", this.texture);
        formData.append("name_of_artist", this.artist);
        formData.append("time_for_artist_to_finish", parseInt(this.duration));
        formData.append("weight", parseInt(this.weight));
        formData.append("height", parseInt(this.height));
        formData.append("width", parseInt(this.width));
        formData.append("length", parseInt(this.length));
        formData.append("usage_of_product", this.usages.join());
        formData.append("type_of_colors_used", this.color);
        formData.append("washable", Boolean(this.wash));
        formData.append("can_be_heated", this.categoryCode);
        formData.append("description", this.extra);
        formData.append("category", Boolean(this.heat));
        formData.append("file", this.pictures[0]);
 this.$store.dispatch("PostNormalProductsFromServer", formData,tokenSend);

伙计们，我很容易用邮递员发送身体在表单数据中的地方。我的 axios 代码有什么问题？

【问题讨论】：

addEnamel 是一个对象吗？你应该把它作为一个 axios 参数传递给一个对象。像这样：axios.post('/api/product',productImg: addEnamel,config)

【参考方案1】：

这个 sn-p 代码对我有用

var form = new FormData();
var file = document.querySelector('#file');
form.append("image", file.files[0]);
axios.post('upload_file', form, 
    headers: 
      'Content-Type': 'multipart/form-data'
    
)

【讨论】：

嗨，peyman 非常感谢您的回答，但是在编辑我的代码后，就像我对我的问题所做的编辑一样，错误保持不变，并且在请求标头中，所有数据都在表单数据中

【参考方案2】：

您可能遇到“CORS”错误

将此代码添加到您的后端源（路由顶部）：

const cors = require('cors');
app.use(cors());

然后在终端中运行：

npm i cors

【讨论】：

您好 amin 先生，感谢您的回答，但如果这是一个 cors 错误，我无法发送任何内容或从服务器获取任何内容，所以我认为这不是问题。