圖片上傳是前端開發中經常使用到的,上傳方案也有很多種吧,可能你有在使用一些插件完成上傳,(比如我以前自己寫的一個後臺系統)現在在這裏總結下圖片上傳的解決方案。主要有一下幾種:
1.input 標籤之 file 類型
2.FileReader 對象:讀取文件
3.FileReader.readAsDataURL():將讀取的文件轉換爲 base64 編碼的字符串
4.FormData 對象
5.使用 axios 上傳
input 標籤之 file 類型
當設置 input 標籤 type 爲 file 時,input 表現性狀爲上傳文件樣式
file-input 有如下屬性:
- accept
指定選擇文件類型的範圍。默認爲所有文件類型
圖片爲 accept=”image/*“
文件類型取值見MDN - capture
當文件類型爲圖片或視頻且在移動端時,此屬性纔有意義。
capture = ‘user’ 調用前置攝像頭
capture = ‘environment’ 調用後置攝像頭
不設置則爲用戶自己選擇 - multiple
一個 Boolean 值,如果存在,則表示用戶可以選擇多個文件 - 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 上傳
大家都知道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表單提交文件等方式,可能不太自由。諸位有興趣的可以看一下。