图片上传方案详解

以往用到图片上传功能都是直接使用现成的插件，今天把其中用到的知识点整理一下。

知识点字典

• input 标签之 file 类型
• FileReader 对象：读取文件
• FileReader.readAsDataURL()：将读取的文件转换为 base64 编码的字符串
• FormData 对象
• 使用 axios 上传

input 标签之 file 类型

当设置 input 标签 type 为 file 时，input 表现性状为上传文件样式

file-input 有以下属性：

1. accept
   指定选择文件类型的范围。默认为全部文件类型
   图片为 accept="image/*"
   文件类型取值见MDN
2. capture
   当文件类型为图片或视频且在移动端时，此属性才有意义。
   • capture = 'user' 调用前置摄像头
   • capture = 'environment' 调用后置摄像头
   • 不设置则为用户本身选择
3. multiple
   一个 Boolean 值，若是存在，则表示用户能够选择多个文件
4. files
   返回一个 FileList，列出每一个所选文件对象。除非 multiple 指定了属性，不然此列表只有一个成员。主要用于 JS 操做。

<!-- html -->
<input type="file" multiple id="imgLocal" accept="image/*" />
复制代码

// js
let inp = document.querySelector('#imgLocal')
inp.onchange = function(e) {
  let fileList = document.querySelector('#imgLocal').files
  console.log(fileList) //files
}
复制代码

FileReader 对象

咱们用 FileReader 对象实现图片预览功能。

FileReader 对象容许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

构造函数

new FileReader()

返回一个新构造的 FileReader。

属性

• FileReader.readyState
  表示 FileReader 状态的数字，取值以下
  • 0：EMPTY/尚未加载任何数据
  • 1：LOADING/数据正在被加载
  • 2：DONE/已完成所有的读取请求
• FileReader.result
  文件的内容。该属性仅在读取操做完成后才有效。
• FileReader.error

事件及方法

咱们主要是用 FileReader.onload 事件及 FileReader.readAsDataURL() 方法，其余见MDN

• FileReader.onload
  处理 load 事件。该事件在读取操做完成时触发
• FileReader.readAsDataURL() 开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个 data: URL 格式的字符串以表示所读取文件的内容。

//继续使用上文的fileList
let file = fileList[0]
const fileReader = new FileReader()
fileReader.readAsDataURL(file) //读取图片
fileReader.addEventListener('load', function() {
  // 读取完成
  let res = fileReader.result
  // res是base64格式的图片
})
复制代码

咱们将 DOM 上 img 的 src 设为读取的结果便可实现预览功能。

FormData 对象

FormData 对象的使用：

1. 用一些键值对来模拟一系列表单控件：即把 form 中全部表单元素的 name 与 value 组装成 一个 queryString
2. 异步上传二进制文件。

构造函数

new FormData()

返回一个新构造的 FormData。

方法

FormData 方法有不少。咱们这里只用了她的 append()方法

formData.append(name, value, filename)

• name:属性名
• value:属性值，在咱们这里则指 file 数据
• filename:当第二个参数为 file 或 blob 时，告诉服务器的文件名。Blob 对象的默认文件名是“blob”。File 对象的默认文件名 是文件的文件名。

// 继续使用上文的file
const formDate = new FormData()
formDate.append('userPicture', file, '1.jpg')
复制代码

使用 axios 上传

主要是设置 header 中的 Content-Type

直接上代码

//继续使用上文的formDate
let config = {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}
axios
  .post('serverUrl', formDate, config)
  .then(res => {
    console.log(res)
  })
  .catch(err => {
    console.log(err)
  })
复制代码

axios 亦可 使用onUploadProgress监听上传进度，再也不赘述。

其余

其余还有直接form表单提交文件等方式，可能不太自由。诸位有兴趣的能够看一下。

原文再此