我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

js 图片上传给后台的3种格式

1. file格式 (创建formData来完成file上传)

代码:

<input type="file" id="imgfile" accept="image/jpeg, image/png, image/jpg" >

然后再js中，通过监听input的change事件
document.querySelector（‘input’）.onchange = function () {
 // 创建FormData对象
let fd = new FormData()
  // 把文件对象，放入FormData对象中; 属性以接口文档为准;
 fd.append('avatar', inp.files[0])
 // 发送ajax
 axios.post（‘路径’，{fd}）.then（res=>{}）
}

2. base64格式

代码:

// 1. 创建 FileReader 对象
    const fr = new FileReader()
// 2. 调用 readAsDataURL 函数，读取文件内容
    fr.readAsDataURL(files[0])
// 3. 监听 fr 的 onload 事件
    fr.onload = e => {
// 4. 通过 e.target.result 获取到读取的结果，值是字符串（base64 格式的字符串）
      this.avatar = e.target.result

3. Blob流格式

代码：

      // 1、new创建blob格式的一个对象，将文件放进去，type为类型
      let blob = new Blob([inp.files[0]], { type: "text/plain;charset=utf-8" })
      // 2、 创建 FileReader 对象
      let reader = new FileReader()
      // 3、FileReader 中的readAsDataURL方法可以将读取到的文件编码成DataURL ，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件
      reader.readAsDataURL(blob)
      // 4、onload:文件读取成功时触发
      reader.onload = (e) => {
        console.log('e就是读取文件返回的对象', e)
      }
      // 5、blob就是你需要的那个blob格式的对象
      console.log(blob)