圖片上傳方案詳解

Karuru 發布于2019-08-23 14:27 / 1188人閱讀

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

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

知識點字典

input 標簽之 file 類型

FileReader 對象：讀取文件

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

FormData 對象

使用 axios 上傳

input 標簽之 file 類型

當設置 input 標簽 type 為 file 時，input 表現性狀為上傳文件樣式

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 對象實現圖片預覽功能。

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 對象的使用：

用一些鍵值對來模擬一系列表單控件：即把 form 中所有表單元素的 name 與 value 組裝成
一個 queryString

異步上傳二進制文件。

構造函數

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

云服務器 GPU云服務器圖片上傳上傳圖片圖片一直顯示圖片上傳中上傳圖片類

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100638.html

圖片上傳方案詳解

摘要：以往用到圖片上傳功能都是直接使用現成的插件，今天把其中用到的知識點整理一下。構造函數返回一個新構造的。事件及方法我們主要是用事件及方法，其他見處理事件。繼續使用上文的讀取圖片讀取完成是格式的圖片我們將上的設為讀取的結果即可實現預覽功能。以往用到圖片上傳功能都是直接使用現成的插件，今天把其中用到的知識點整理一下。知識點字典 input 標簽之 file 類型 FileReader ...

glumes 2019-08-02 13:59 評論0 收藏0
利用jQuery插件uploadPreview實現圖片上傳以及validate表單驗證示例詳解

摘要：首先給大家介紹我之前遇到的問題，傳統的圖片上傳展示和防止網頁的跳轉，大佬們都懂，但是在這里我想簡單的寫一下我的經歷。下次是截圖僅供參考或者是這樣有其他參數的驗證具體的詳細參數的一些問題，請參考其他網站。首先給大家介紹我之前遇到的問題，傳統的圖片上傳、展示和防止網頁的跳轉，大佬們都懂，但是在這里我想簡單的寫一下我的經歷。僅供小白參考。引入jquery之后，在引入以下的js，我會簡...

The question 2019-08-22 18:13 評論0 收藏0
利用jQuery插件uploadPreview實現圖片上傳以及validate表單驗證示例詳解

摘要：首先給大家介紹我之前遇到的問題，傳統的圖片上傳展示和防止網頁的跳轉，大佬們都懂，但是在這里我想簡單的寫一下我的經歷。下次是截圖僅供參考或者是這樣有其他參數的驗證具體的詳細參數的一些問題，請參考其他網站。首先給大家介紹我之前遇到的問題，傳統的圖片上傳、展示和防止網頁的跳轉，大佬們都懂，但是在這里我想簡單的寫一下我的經歷。僅供小白參考。引入jquery之后，在引入以下的js，我會簡...

Darkgel 2019-08-02 10:46 評論0 收藏0
利用jQuery插件uploadPreview實現圖片上傳以及validate表單驗證示例詳解

摘要：首先給大家介紹我之前遇到的問題，傳統的圖片上傳展示和防止網頁的跳轉，大佬們都懂，但是在這里我想簡單的寫一下我的經歷。下次是截圖僅供參考或者是這樣有其他參數的驗證具體的詳細參數的一些問題，請參考其他網站。首先給大家介紹我之前遇到的問題，傳統的圖片上傳、展示和防止網頁的跳轉，大佬們都懂，但是在這里我想簡單的寫一下我的經歷。僅供小白參考。引入jquery之后，在引入以下的js，我會簡...

Reducto 2019-08-30 15:53 評論0 收藏0