在前端开中必不可少的会跟附件打交道，最常见的就是附件上传（包括各种类型的附件，图片，文档，视频，音频等），我们也可以很方便的通过input和ajax提供的方式进行上传，但是对于附件相关的操作处理中的一些概念我们有必要有个清楚的认识，常见的名称由File，Blob，ArrayBuffer、fileReader、createObjectURL，Base64, formData
File （文件）
最常见的文件相关的操作，比如 获取的文件对象，可以直接用来上传
<input type="file" id="file" />
const file = document.getElementById('file').files[0]
File文件的操作继承与Blob
Blob （Binary large object）二进制大数据文件
File文件可以直接转换为Blob类型, 可以对Blob进行分割上传
const blob = new Blob(File)
ArrayBuffer （二进制的容器，与blob类似，只不过更加底层，它是内存上面的二进制数据）
fileReader （文件读取操作）
对文件进行读取，然后转换为其他类型的数据
const reader = new FileReader()
reader.onload = () => {
const imgData = reader.result
let buf = new Blob(imgData).toString('base64')
this.imgData = 'data:image/png;base64,' + buf
}
// 把文件转化为base64
// reader.readAsDataURL(file)
// 读取文件的文本内容
// reader.readAsText(file)
reader.readAsBinaryString(file)
// reader.readAsArrayBuffer(file)
createObjectURL （对数据和文件创建一个本地url，可以进行预览和访问）
const blob = new Blob(['hello world'])
const url = window.URL.createObjectURL(blod)
Base64 （文件的字符串表示法）
可以通过canvas和fileReader把文件转化为Base64字符串（把8-bit 数据翻译成标准 ASCII 字符），在浏览器中能直接显示，避免去服务器获取，坏处是浏览器不能缓存
formData （文件上传格式）
const formData = new FormData()
formData.append('file', file)
阿里云oss图片上传时阿里云提供的附件上传服务，可以接受任何类型的文件上传，性能和稳定性非常的强
阿里云提供了前端后上传的SDK方便用户做上传操作，如果上传服务通过自己的服务器由后端实现，这样会造成上传的稳定性和速度大受影响，因为必须先把文件上传到自己的服务器，然后在从服务器上传到阿里云服务器，这样就经历了两次上传操作，所有作为前端性能和体验来说，希望能实现直传阿里云oss服务器，达到最优的效果
对于前端想实现的效果是：实现任何附件的上传并且上传成功之后返回服务器端的路径，供访问和展示
前端直传有两种方式实现
1. 前端签名直传
此方式所有操作都在前端进行，包括上传服务器所需要的签名信息，这样最明显的问题是安全性问题，阿里云oss服务相关的配置都暴露在前面界面里面，很容易被它人盗取，所以虽然此方式可以满足我们的需求，但是是不可采取的
2. 后端签名前端直接
此方法在前端签名直传的基础上，做了一层安全的保证，把阿里云相关的配置信息和签名信息都放到服务器去生成和返回，不暴露在前端界面中，安全性得到保证的同时功能也不受影响
接口来具体梳理后端签名和前端直传的操作
1.首页需要在阿里云管理后台oss项目模块获取相关配置和秘钥信息，以及设置好跨域访问的配置
-
后端接口实现签名，返回配置以及签名信息
-
前端调用阿里云上传接口使用formData方式附件进行上传
上面三个步骤可以实现附件的上传，但是此种情况前端调用接口后不会接受到上传附件的返回结果，这样对于前端来说是不太合理的
想实现接口返回数据，我们必须在后端签名的接口里面加入回调地址，这个地址是我们服务器端的一个接口地址，当上传阿里云成功之后，阿里云会调用该接口（备注：此接口必须是post请求），然后在前端请求中返回该接口所返回的内容，这样可以在此内容中得到上传的附件路径，
具体代码实现
1.后端签名
2.前端请求
