学习浏览器中的js-通过fetch()上传文件

这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战

前言

通过前几篇文章我们学习记录了浏览器中的 JavaScript 更文: 其他 各知识点小结的相关阅读: list.

前面文章入门学习了 fetch 网络请求方法/其参数/以及响应数据的处理, 本文继续来学习通过 fetch() 方法上传文件, 也是一个比较常见的业务需求了!

fetch() 方法上传文件

工作中项目对用户向服务器上传文件这一业务需求还是挺常见的. 可以通过将 FormData 对象作为请求体来实现.

获取文件

要上传文件到服务器, 首先需要在客户端获取到要上传的文件对象:

通过在页面显示的 一个<input type="file" />元素, 然后监听该元素的 change事件. 在 change事件发生时, 则这个输入元素 input 的 files数组应该会至少包含一个 File对象. 当然也有HTML 的相关 API - 拖动文件到页面的方法来获取这个文件File对象(是通过 dataTransfer.files数组来获取文件)

注意: 这里的File对象是 **Blob**的一种

Blob - MDN Blob 对象表示一个不可变、原始数据的类文件对象。

通过 FormData上文件简单代码演示:

// new 一个 FormData
// 通过这个函数对文件进行上传一个 canvas 画的png图片
async function uploadFile(){
   let formData = new FormData()
   formData.set("canvasimage", pngblob)
   let res = await fetch('/api/upload', {
      method: "POST",
      body: {
         formData
      }
   })
   let body = await res.join()
}

相关更文阅读

1. JavaScript 学习理解-Number-这是一个函数
2. JS 学习理解-自动类型转换
3. JavaScript 中的中缀运算符
4. 你知道 JavaScript 的 typeof 是什么吗?
5. 学习 JavaScript 中几个代表性事件(Event)
6. 学习理解客户端 JavaScript-事件分类(一)
7. 客户端 JavaScript-事件分类(二)
8. 学习理解 JavaScript 一事件与事件循环
9. 理解浏览器中的 JavaScript-事件注册
10. 浏览器中的 JavaScript-fetch()网络请求方法
11. HTTP 响应代码

Calm Down & Carry On!

Buy Less by Know More!

学习, 记录积累是一个漫长的过程! 加油!

参考内容

• Blob 对象 | MDN