为什么文件上传后，打开文件提示已损坏？突然产品说：现在上传后文件打开不了。现有一个上传文件的需求，后台这边技术需要使用

前言

常网IT源码上线啦！
本篇录入技术选型专栏，希望能祝君拿下Offer一臂之力，各位看官感兴趣可移步🚶。
有人说面试造火箭，进去拧螺丝；其实个人觉得问的问题是项目中涉及的点 || 热门的技术栈都是很好的面试体验，不要是旁门左道冷门的知识，实际上并不会用到的。
接下来想分享一些自己在项目中遇到的技术选型以及问题场景。

今天看了泰坦尼克号
你知道吗，我这辈子最幸运的事，就是赌赢了船票，然后遇见了你。

压力--

一、前言

今天像往常一样，开开心心的打代码编程。

突然产品说：现在上传后文件打开不了。

于是便有了今天这篇文章，一起来探讨一下。

当然，你也可以当做面试题。

二、回顾

想先回顾一下目前的上传功能的背景。

现有一个上传文件的需求，后台这边技术需要使用binary上传文件，postman如：

那么axios怎么实现上传呢？

我们先来了解一下binary

三、binary

相当于Content-Type:application/octet-stream, 从字面意思得知，只可以上传二进制数据，通常用来上传文件，由于没有键值，所以，一次只能上传一个文件。

四、代码实现

binary类型其实就是文件的File对象的类型。

一般来说：我们都是用FormData对象，把file对象添加进去。

设置Content-Type为：multipart/form-data

但其实我们使用FormData的时候，浏览器会自动设置为multipart/form-data。

export const postData= (params, data) => { return axios({
  method: 'post',
  url: `***`,
  params,
  data,
  headers: {
    'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq'
  }
}).then(res => res.data) };

const formData = new FormData();
formData.append("file", this.fileList[0].originFileObj) // 这里填入你的file文件对象

后台接收到了文件，也能保存到服务器内，但打开文件的时候，发现已经被损坏。

五、代码分析

我们来简单分析一下，我们使用

content-type设置为: 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq'
数据要通过FormData去处理

后台也能接受到了。

但现在文件打不开。

后台人员用postman的binary形式，没有key的，而我们现在用FormData对象传过去是有key（file）的

后台拿到文件是拿到了，但get的时候如果是postman的形式应该直接拿到，可以理解为直接把obj给拿到了，而我们现在前端是obj.file，所以可能导致格式上出现了问题。

六、解决方法

假设现在我们不知道postman的binary在代码中是怎么写的。

我们知道postman有可以用代码语言的示例：

仔细看了一下：

没有使用formdata对象来包装，而是直接传入file对象（binary）；

Content-Type貌似也没有设置。

我们带着上面这两个，重新改一下我们的代码：

return Request({
  method: "put",
  url: `/url`,
  headers: {},
  maxBodyLength: Infinity,
  data: file
});

这样子的代码就代表postman的binary的传法。

浏览器打开后，发现我们的file对象没有在入参看到。

formdata的形式就会显示在入参这里。

再尝试一下，发现文件上传成功了，附件也打开成功了。

后面查了一下jq的写法。

不额外处理file的值。

七、额外知识

我们postman中 form-data、x-www-form-urlencoded、raw、binary有这么几个类型

form-data:

在HTTP请求中，multipart/form-data 是一种常用的数据格式，它将表单数据组织成一条消息，通过标签和分隔符进行区分。

这种格式不仅支持上传键值对，还可以上传文件。当上传的字段包含文件时，会使用 Content-Type 指明文件类型，并通过 Content-Disposition 提供字段的相关信息。由于有 boundary 进行分隔，multipart/form-data 能够有效地同时上传多个文件和键值对，灵活性很高。