图片处理传输的两种格式

开发中，图片的处理传输主要有两种方式：二进制+base64字符串

文件提交

二进制

1. 给file输入框注册onchange事件
2. 获取文件对象files[0]
3. 把file转化为url，使用URL.createObjectURL()
4. 显示到img标签，src的属性值设为url
5. 将file对象绑定到data（使用formdata格式上传file对象而不是url）

base64格式

（filereader用法：developer.mozilla.org/zh-CN/docs/…）

1. 给file输入框注册onchange事件

2. 获取文件对象files[0]

3. 使用FileReader对象

   const fr = new FileReader()
   

   readAsDataURL方法读取文件生成base64字符串（一旦完成，result属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。）

   fr.readAsDataURL(file)  //file为获取的文件对象
   

4. 通过FileReader对象的onload方法回调获取读取的结果

   fr.onload(res=> console.log(res.target.result)) //读取到的base64字符串
   

头像提交

二进制

创建formdata对象

添加文件参数 fd.append（‘接口参数名’，文件对象），除了文件还有其他数据，要遍历添加参数

将formdata作为参数传递给服务器

base64字符串

不作任何处理，就像其他字符串一样上传给服务器

\