圖片上傳方案詳解

以往用到圖片上傳功能都是直接使用現成的插件，今天把其中用到的知識點整理一下。

知識點字典

• 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表單提交文件等方式，可能不太自由。諸位有興趣的能夠看一下。

原文再此