前端文件上传多种方式

   前端上传文件【包含图片、视频等资源文件】是相当常见的场景，作为一名前端开发人员你会遇到后端接收文件的多种方式，以及前端不同场景下的生成的不同文件上传格式。

   1、表单上传方式【最场景、最简单的方式】

上面的是挺简单的，but 刷新了，这个体验大多数场景中让人接受不了，最简单的处理方式设置submit 返回 false

   2、表单升级版 【formData】

   有些场景中我们不一样会使用form，或者说不想用，那么formData就是一个很好的选择了，首先刷新问题是肯定没有了，而且看上逼格更高。

   3、formData 上传 blob 图片

   4、formData 上传 base64 图片； // 一般是把base64转blob在上传

   其他方式欢迎留言探讨， 上面大部分写法是直接用vue的方式，其实都差不多哈。

解决的问题：当前端并发上传大量文件至服务器时，服务器带宽存在瓶颈，会影响上传速度

解决方案：使用STS临时访问凭证访问OSS

流程：

根据不同项目使用情况，向公司OSS管理员（杨坤）提供bucket信息，申请权限。具体包含以下内容：

前端在发起文件上传请求前，判断是否接近过期时间或已超过过期时间，并及时刷新临时访问凭证。

1、使用form表单提交

但是这里要记得添加enctype属性，这个属性是指定form表单在向服务器提交之前，对表单数据如何进行编码。 文件域中的name="file"属性的值，需要和后台接收的对象名一致，不然接收不到。

2、使用ajax提交文件

使用ajax提交首先引入jquery-form.js文件才能实现，接着使用上面的html代码，加入以js则可以实现ajax提交文件。

3、使用FormData对象

4、后台接收文件，框架采用的Spring Boot 微服务框架，因为该框架搭建很方便所以采用这个框架写例子。

---