資訊專欄INFORMATION COLUMN
摘要：圖片上傳是前端開發(fā)中經(jīng)常使用到的，上傳方案也有很多種吧，可能你有在使用一些插件完成上傳，比如我以前自己寫的一個后臺系統(tǒng)現(xiàn)在在這里總結下圖片上傳的解決方案。構造函數(shù)返回一個新構造的。事件及方法我們主要是用事件及方法，其他見處理事件。
圖片上傳是前端開發(fā)中經(jīng)常使用到的，上傳方案也有很多種吧，可能你有在使用一些插件完成上傳，（比如我以前自己寫的一個后臺系統(tǒng)）現(xiàn)在在這里總結下圖片上傳的解決方案。主要有一下幾種：1.input 標簽之 file 類型 2.FileReader 對象：讀取文件 3.FileReader.readAsDataURL()：將讀取的文件轉換為 base64 編碼的字符串 4.FormData 對象 5.使用 axios 上傳 input 標簽之 file 類型
當設置 input 標簽 type 為 file 時，input 表現(xiàn)性狀為上傳文件樣式
file-input 有如下屬性：
accept
指定選擇文件類型的范圍。默認為所有文件類型
圖片為 accept=”image/*“
文件類型取值見MDN
capture
當文件類型為圖片或視頻且在移動端時，此屬性才有意義。
capture = ‘user’ 調用前置攝像頭
capture = ‘environment’ 調用后置攝像頭
不設置則為用戶自己選擇
multiple
一個 Boolean 值，如果存在，則表示用戶可以選擇多個文件
files
返回一個 FileList，列出每個所選文件對象。除非 multiple 指定了屬性，否則此列表只有一個成員。主要用于 JS 操作。
// js
let inp = document.querySelector("#imgLocal")
inp.onchange = function(e) {
let fileList = document.querySelector("#imgLocal").files
console.log(fileList) //files
}
FileReader 對象
我們用 FileReader 對象實現(xiàn)圖片預覽功能。
FileReader 對象允許 Web 應用程序異步讀取存儲在用戶計算機上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)。構造函數(shù)
new FileReader()
返回一個新構造的 FileReader。
屬性FileReader.readyState
表示 FileReader 狀態(tài)的數(shù)字，取值如下
0：EMPTY/還沒有加載任何數(shù)據(jù)
1：LOADING/數(shù)據(jù)正在被加載
2：DONE/已完成全部的讀取請求
FileReader.result
文件的內(nèi)容。該屬性僅在讀取操作完成后才有效。
FileReader.error
事件及方法我們主要是用 FileReader.onload 事件及 FileReader.readAsDataURL() 方法，其他見MDN
FileReader.onload
處理 load 事件。該事件在讀取操作完成時觸發(fā)
FileReader.readAsDataURL()
開始讀取指定的 Blob 中的內(nèi)容。一旦完成，result 屬性中將包含一個 data: URL 格式的字符串以表示所讀取文件的內(nèi)容。
//繼續(xù)使用上文的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 設為讀取的結果即可實現(xiàn)預覽功能。
FormData 對象FormData 對象的使用：
1.用一些鍵值對來模擬一系列表單控件：即把 form 中所有表單元素的 name 與 value 組裝成
一個 queryString
2.異步上傳二進制文件。
new FormData()
返回一個新構造的 FormData。
方法FormData 方法有很多。我們這里只用了她的 append()方法
formData.append(name, value, filename)
name:屬性名
value:屬性值，在我們這里則指 file 數(shù)據(jù)
filename:當?shù)诙€參數(shù)為 file 或 blob 時，告訴服務器的文件名。Blob 對象的默認文件名是“blob”。File 對象的默認文件名 是文件的文件名。
代碼如下：
// 繼續(xù)使用上文的file
const formDate = new FormData()
formDate.append("userPicture", file, "1.jpg")
使用 axios 上傳
大家都知道axios可以做數(shù)據(jù)請求，也可以實現(xiàn)圖片上傳的功能，主要是設置 header 中的 Content-Type
//繼續(xù)使用上文的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監(jiān)聽上傳進度，不再贅述。
其他其他還有直接form表單提交文件等方式，可能不太自由。諸位有興趣的可以看一下。
如果您覺得文章還不錯，請隨手點個贊，您的認同是我的動力！
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/100750.html
摘要：圖片上傳是前端開發(fā)中經(jīng)常使用到的，上傳方案也有很多種吧，可能你有在使用一些插件完成上傳，比如我以前自己寫的一個后臺系統(tǒng)現(xiàn)在在這里總結下圖片上傳的解決方案。構造函數(shù)返回一個新構造的。事件及方法我們主要是用事件及方法，其他見處理事件。 showImg(https://segmentfault.com/img/bVbmLXM?w=500&h=500); 圖片上傳是前端開發(fā)中經(jīng)常使用到的，上傳...
摘要：圖片上傳是前端開發(fā)中經(jīng)常使用到的，上傳方案也有很多種吧，可能你有在使用一些插件完成上傳，比如我以前自己寫的一個后臺系統(tǒng)現(xiàn)在在這里總結下圖片上傳的解決方案。構造函數(shù)返回一個新構造的。事件及方法我們主要是用事件及方法，其他見處理事件。 showImg(https://segmentfault.com/img/bVbmLXM?w=500&h=500); 圖片上傳是前端開發(fā)中經(jīng)常使用到的，上傳...
摘要：圖片文件大小減小后，上傳速度自然會提升，在同樣的并發(fā)下，后臺處理的速度也會得到提升，用戶體驗得到提升。 這是一個很簡單的方案。嗯，是真的。 為什么要這么做？ 在移動Web蓬勃發(fā)展的今天，有太多太多的應用需要讓用戶在移動Web上傳圖片文件了，正因如此，我們有些困難必須去攻克： 低網(wǎng)速下上傳進度緩慢，用戶體驗差 高并發(fā)下，后臺處理較大的上傳文件壓力大 或許有更多... 在攻克上面的一些...
閱讀 1094·2021-11-22 14:56
閱讀 1531·2019-08-30 15:55
閱讀 3373·2019-08-30 15:45
閱讀 1667·2019-08-30 13:03
閱讀 2879·2019-08-29 18:47
閱讀 3342·2019-08-29 11:09
閱讀 2650·2019-08-26 18:36
閱讀 2625·2019-08-26 13:55
