成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

圖片上傳方案詳解

Karuru / 1221人閱讀

摘要：以往用到圖片上傳功能都是直接使用現(xiàn)成的插件，今天把其中用到的知識(shí)點(diǎn)整理一下。構(gòu)造函數(shù)返回一個(gè)新構(gòu)造的。事件及方法我們主要是用事件及方法，其他見(jiàn)處理事件。繼續(xù)使用上文的讀取圖片讀取完成是格式的圖片我們將上的設(shè)為讀取的結(jié)果即可實(shí)現(xiàn)預(yù)覽功能。

以往用到圖片上傳功能都是直接使用現(xiàn)成的插件，今天把其中用到的知識(shí)點(diǎn)整理一下。

知識(shí)點(diǎn)字典

input 標(biāo)簽之 file 類(lèi)型

FileReader 對(duì)象：讀取文件

FileReader.readAsDataURL()：將讀取的文件轉(zhuǎn)換為 base64 編碼的字符串

FormData 對(duì)象

使用 axios 上傳

input 標(biāo)簽之 file 類(lèi)型

當(dāng)設(shè)置 input 標(biāo)簽 type 為 file 時(shí)，input 表現(xiàn)性狀為上傳文件樣式

file-input 有如下屬性：

accept
指定選擇文件類(lèi)型的范圍。默認(rèn)為所有文件類(lèi)型
圖片為 accept="image/*"
文件類(lèi)型取值見(jiàn)MDN

capture
當(dāng)文件類(lèi)型為圖片或視頻且在移動(dòng)端時(shí)，此屬性才有意義。

capture = "user" 調(diào)用前置攝像頭

capture = "environment" 調(diào)用后置攝像頭

不設(shè)置則為用戶自己選擇

multiple
一個(gè) Boolean 值，如果存在，則表示用戶可以選擇多個(gè)文件

files
返回一個(gè) FileList，列出每個(gè)所選文件對(duì)象。除非 multiple 指定了屬性，否則此列表只有一個(gè)成員。主要用于 JS 操作。



// js
let inp = document.querySelector("#imgLocal")
inp.onchange = function(e) {
  let fileList = document.querySelector("#imgLocal").files
  console.log(fileList) //files
}
FileReader 對(duì)象

我們用 FileReader 對(duì)象實(shí)現(xiàn)圖片預(yù)覽功能。

FileReader 對(duì)象允許 Web 應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對(duì)象指定要讀取的文件或數(shù)據(jù)。

構(gòu)造函數(shù)

new FileReader()

返回一個(gè)新構(gòu)造的 FileReader。

屬性

FileReader.readyState
表示 FileReader 狀態(tài)的數(shù)字，取值如下

0：EMPTY/還沒(méi)有加載任何數(shù)據(jù)

1：LOADING/數(shù)據(jù)正在被加載

2：DONE/已完成全部的讀取請(qǐng)求

FileReader.result
文件的內(nèi)容。該屬性僅在讀取操作完成后才有效。

FileReader.error

事件及方法

我們主要是用 FileReader.onload 事件及 FileReader.readAsDataURL() 方法，其他見(jiàn)MDN

FileReader.onload
處理 load 事件。該事件在讀取操作完成時(shí)觸發(fā)

FileReader.readAsDataURL()
開(kāi)始讀取指定的 Blob 中的內(nèi)容。一旦完成，result 屬性中將包含一個(gè) 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 設(shè)為讀取的結(jié)果即可實(shí)現(xiàn)預(yù)覽功能。

FormData 對(duì)象

FormData 對(duì)象的使用：

用一些鍵值對(duì)來(lái)模擬一系列表單控件：即把 form 中所有表單元素的 name 與 value 組裝成
一個(gè) queryString

異步上傳二進(jìn)制文件。

構(gòu)造函數(shù)

new FormData()

返回一個(gè)新構(gòu)造的 FormData。

方法

FormData 方法有很多。我們這里只用了她的 append()方法

formData.append(name, value, filename)

name:屬性名

value:屬性值，在我們這里則指 file 數(shù)據(jù)

filename:當(dāng)?shù)诙€(gè)參數(shù)為 file 或 blob 時(shí)，告訴服務(wù)器的文件名。Blob 對(duì)象的默認(rèn)文件名是“blob”。File 對(duì)象的默認(rèn)文件名 是文件的文件名。

// 繼續(xù)使用上文的file
const formDate = new FormData()
formDate.append("userPicture", file, "1.jpg")
使用 axios 上傳

主要是設(shè)置 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)聽(tīng)上傳進(jìn)度，不再贅述。

其他

其他還有直接form表單提交文件等方式，可能不太自由。諸位有興趣的可以看一下。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100638.html

相關(guān)文章

  • 圖片上傳方案詳解

    摘要：以往用到圖片上傳功能都是直接使用現(xiàn)成的插件，今天把其中用到的知識(shí)點(diǎn)整理一下。構(gòu)造函數(shù)返回一個(gè)新構(gòu)造的。事件及方法我們主要是用事件及方法，其他見(jiàn)處理事件。繼續(xù)使用上文的讀取圖片讀取完成是格式的圖片我們將上的設(shè)為讀取的結(jié)果即可實(shí)現(xiàn)預(yù)覽功能。 以往用到圖片上傳功能都是直接使用現(xiàn)成的插件，今天把其中用到的知識(shí)點(diǎn)整理一下。 知識(shí)點(diǎn)字典 input 標(biāo)簽之 file 類(lèi)型 FileReader ...

    glumes 評(píng)論0 收藏0

  • 利用jQuery插件uploadPreview實(shí)現(xiàn)圖片上傳以及validate表單驗(yàn)證示例詳解

    摘要：首先給大家介紹我之前遇到的問(wèn)題，傳統(tǒng)的圖片上傳展示和防止網(wǎng)頁(yè)的跳轉(zhuǎn)，大佬們都懂，但是在這里我想簡(jiǎn)單的寫(xiě)一下我的經(jīng)歷。下次是截圖僅供參考或者是這樣有其他參數(shù)的驗(yàn)證具體的詳細(xì)參數(shù)的一些問(wèn)題，請(qǐng)參考其他網(wǎng)站。 首先給大家介紹我之前遇到的問(wèn)題，傳統(tǒng)的圖片上傳、展示和防止網(wǎng)頁(yè)的跳轉(zhuǎn)，大佬們都懂，但是在這里我想簡(jiǎn)單的寫(xiě)一下我的經(jīng)歷。僅供小白參考。 引入jquery之后，在引入以下的js，我會(huì)簡(jiǎn)...

    The question 評(píng)論0 收藏0

  • 利用jQuery插件uploadPreview實(shí)現(xiàn)圖片上傳以及validate表單驗(yàn)證示例詳解

    摘要：首先給大家介紹我之前遇到的問(wèn)題，傳統(tǒng)的圖片上傳展示和防止網(wǎng)頁(yè)的跳轉(zhuǎn)，大佬們都懂，但是在這里我想簡(jiǎn)單的寫(xiě)一下我的經(jīng)歷。下次是截圖僅供參考或者是這樣有其他參數(shù)的驗(yàn)證具體的詳細(xì)參數(shù)的一些問(wèn)題，請(qǐng)參考其他網(wǎng)站。 首先給大家介紹我之前遇到的問(wèn)題，傳統(tǒng)的圖片上傳、展示和防止網(wǎng)頁(yè)的跳轉(zhuǎn)，大佬們都懂，但是在這里我想簡(jiǎn)單的寫(xiě)一下我的經(jīng)歷。僅供小白參考。 引入jquery之后，在引入以下的js，我會(huì)簡(jiǎn)...

    Darkgel 評(píng)論0 收藏0

  • 利用jQuery插件uploadPreview實(shí)現(xiàn)圖片上傳以及validate表單驗(yàn)證示例詳解

    摘要：首先給大家介紹我之前遇到的問(wèn)題，傳統(tǒng)的圖片上傳展示和防止網(wǎng)頁(yè)的跳轉(zhuǎn)，大佬們都懂，但是在這里我想簡(jiǎn)單的寫(xiě)一下我的經(jīng)歷。下次是截圖僅供參考或者是這樣有其他參數(shù)的驗(yàn)證具體的詳細(xì)參數(shù)的一些問(wèn)題，請(qǐng)參考其他網(wǎng)站。 首先給大家介紹我之前遇到的問(wèn)題，傳統(tǒng)的圖片上傳、展示和防止網(wǎng)頁(yè)的跳轉(zhuǎn)，大佬們都懂，但是在這里我想簡(jiǎn)單的寫(xiě)一下我的經(jīng)歷。僅供小白參考。 引入jquery之后，在引入以下的js，我會(huì)簡(jiǎn)...

    Reducto 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<