关于oss直传

为什么要使用oss直传：

前后端文件传输涉及数据较大，往往会成为很多项目的性能瓶颈。常见的传输方式也有不少，相对来说，OSS直传能够减轻很大压力。

传统方式相比直传OSS，相对来说有三个缺点：

• 上传慢：用户数据需先上传到应用服务器，之后再上传到OSS。网络传输时间比直传到OSS多一倍。如果用户数据不通过应用服务器中转，而是直传到OSS，速度将大大提升。而且OSS采用BGP带宽，能保证各地各运营商之间的传输速度。
• 扩展性差：如果后续用户多了，应用服务器会成为瓶颈。
• 费用高：需要准备多台应用服务器。由于OSS上传流量是免费的，如果数据直传到OSS，不通过应用服务器，那么将能省下几台应用服务器。

当然，对于规模较小、成本较低的项目来说，常见的上传方式还是适合的，毕竟没有最好的，只有最适合的。

一般的oss直传步骤：

1. 前端请求后端接口，拿到oss签名，包括callback、accessid、policy等参数。（入参根据后端需求提供即可）

2. 拿到签名等数据后，请求上传oss的接口，这个接口的入参包括1步骤请求回来的参数，及需要上传的file文件

3. 上传oss成功后，接口会返回ossId，等文件相关信息。如果要提交表单，根据后端定义的字段将返回的ossId传递过去即可

直传中遇到的一些问题：

1. 跨域

前端可以开代理，代理到oss放行的域名即可。如果还存在跨域，可以在请求中设置 withCredentials: false，后端也要做相应更改

2. 上传oss接口返回Response body is not valid json format.

我这边的原因是，oss直传file需要md5加密，直接传递没有加密的文件，后台接口会直接返回这个错误

3. md5加密失效

change事件后直接上传md5要上传的文件，但是md5值没有变化，即便文件已经更改，但是md5值依然没有改变。这时候可以在change事件引用fileReader方法，当文件读取完成后，再执行md5，这时候的md5值，就是最新的文件生成的了。

4. 上传的content-type要设置成表单上传

headers: { 'content-type': 'application/x-www-form-urlencoded' },

参考：前端文件花式直传OSS！后端：那我走？ - 知乎