js前端上傳文件縮略圖技巧有哪些

本篇內容介紹了“js前端上傳文件縮略圖技巧有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

引言

通常情況下，前端提交給服務器的數(shù)據格式為JSON格式，但很多時候用戶想上傳自己的頭像、視頻等，這些非文本數(shù)據的時候，就不能直接以JSON格式上傳到后端了。

當我們要獲取用戶上傳的文件，可以使用input表單項，將type屬性值設置為“file”。

<form action="">
    <input type="file" name="file">
</form>

同時，我們?yōu)楸韱雾椊壎╟hange事件，當用戶上傳文件時，我們就可以在事件對象中獲取到用戶上傳的文件。

<script>
    const inp = document.querySelector("input")
    inp.onchange = function(e) {
      console.log(e.target.files);
    }
</script>

但需要注意的是 e.target.files 是一個類數(shù)組(FileList)，會將你上傳的多個文件都存儲在這個數(shù)組中，而這個例子中我們只上傳一個文件，所以我們用 e.target.files[0] 將這個文件對象取出來。（若想上傳多個文件，可以在input標簽中增加multiple屬性）。

文件對象簡介

在學習上傳文件前，我們先簡單了解四個與文件相關的內置對象。

Blob

Blob是一個存儲二進制的對象，實際上很少直接使用這個對象。

• size 屬性，返回Blob對象的字節(jié)數(shù)，即文件的大小。

const input = document.getElementById('input');
const output = document.getElementById('output');
input.addEventListener('change', (e) => {
output.innerText = `文件的大小為${e.target.files[0].size}`;
});

• slice() 方法，對Blob對象進行切片，返回新的Blob對象。

• 可以用這個方法實現(xiàn)大文件切片上傳。

var blob = new Blob().slice([start [, end [, contentType]]]};
/*
- start 開始位置的下標
- end 結束位置的下標
- contentType 給新的Blob賦予一個新的文檔類型。這將會把它的 type 屬性設為被傳入的值。它的默認值是一個空的字符串
*/

File

• 通常情況下， File 對象是來自用戶在一個 <input> 元素上選擇文件后返回的 FileList 對象，也可以是來自由拖放操作生成的 DataTransfer 對象。

• file 對象是Blob的一個子類，因此file對象可以直接使用Blob中的方法和屬性。

const input = document.getElementById('input');
input.addEventListener('change', (e) => {
  let file = e.target.files[0]
  if(file.size > 4 * 1024 * 1024 || file.type != "image/jpeg"){
      alert("文件不得大于4M，且圖片格式要為jpg格式。")
  }
});

FileReader

• 異步讀取存儲在用戶計算機上的文件（或原始數(shù)據緩沖區(qū)）的內容，使用 File 或 Blob 對象指定要讀取的文件或數(shù)據。

var fr = new FileReader();

• readAsDataURL()，讀取指定的 Blob 或 File 對象。讀取操作完成的時候，readyState 會變成已完成DONE，并觸發(fā) loadend 事件，同時 result 屬性將包含一個data:URL 格式的字符串（base64 編碼）以表示所讀取文件的內容。

fr.readAsDataURL(blob)
/*
- blob,被讀取的 blob 或 file對象
*/

• readAsText()，將 Blob 或者 File 對象根據特殊的編碼格式轉化為內容 (字符串形式)。

fr.readAsDataURL(blob)
/*
- blob,被讀取的 blob 或 file對象
*/

注意，以上兩個方法都是異步的，也就是說，只有當執(zhí)行完成后才能夠查看到結果，如果直接查看是無結果的，并返回 undefined。我們需要為fr掛載load或loadend事件，在事件回調中使用result屬性才能獲取結果。

<input type="file" onchange="previewFile()">
<img src="" height="200">
<script>
function previewFile(e) {
  var img = document.querySelector('img');
  let file = e.target.files[0];
  let fr = new FileReader();
  reader.readAsDataURL(file);
  fr.addEventListener("load", function () {
    img.src = fr.result;
  });
}
</script>

FormData

• 提供了一種表示表單數(shù)據的鍵值對 key/value 的構造方式。

• 在<form>標簽中，我們直接點擊提交按鈕，瀏覽器會以默認以x-www-form-urlencoded的數(shù)據格式向服務器提交數(shù)據。

• 當我們?yōu)?code>form標簽設置enctype屬性時，可以設置發(fā)送的數(shù)據格式。

<!-- 
application/x-www-form-urlencoded 在發(fā)送前編碼所有字符（默認）
multipart/form-data  不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值
text/plain           空格轉換為 "+" 加號，但不對特殊字符編碼。
-->
<form action="/upload" enctype="multipart/form-data" method="post">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="file" name="file">
    <input type="submit">
</form>

在上面的例子中，瀏覽器會以formdata的數(shù)據格式向服務器發(fā)送表單數(shù)據，但我們使用框架來編寫業(yè)務時，我們不會直接使用表單提交數(shù)據，通常都是將表單中的數(shù)據提取出來，手動構建出相應的數(shù)據格式，再用aixos發(fā)送給服務器，所以我們需要主動使用FormData對象封裝file對象

• append() 方法，向 FormData 中添加新的屬性值，F(xiàn)ormData 對應的屬性值存在也不會覆蓋原值，而是新增一個值，如果屬性不存在則新增一項屬性值。

function previewFile(e) {
    const formdata = new FormData()
    formData.append("userAvatar", e.target.files[0]);
}
/*
    第一個值為文件名稱，第二個值為要傳送的文件對象/字符串
*/

文件對象之間的關系

• 由上圖可以看出，當我們通過input標簽上傳文件時，我們可以得到一個file對象，file對象與blob對象可以互相轉換，但要將文件對象上傳給服務器則是不允許的，因為后端無法識別這種對象，因此我們需要將文件對象包裝成formdata對象，或者轉換為base64等文本格式再傳給后端。

function previewFile(e) {
  let file = e.target.files[0];
  let formdata = new FormData()
  formdata.append("userAva", file)    // 注意，若要實現(xiàn)大文件分片上傳時，同一個文件分片的文件名要相同，方便后端拼接
  axios.post("http://localhost/...", {
      data: formdata
  }).then( res => {
      console.log(res)
  )
}

縮略圖的實現(xiàn)

我們通過input標簽上傳圖片后，用戶無法查看所提交的圖片。

因此為了提高用戶體驗，我們在用戶提交圖片后，將圖片在頁面中顯示出來。

<form action="">
  <input type="file" name="file"><br/>
  <img src="" alt="">
</form>
<script>
  const inp = document.querySelector("input")
  const img = document.querySelector("img")
  const fr = new FileReader()
  inp.onchange = function(e) {
    let file = e.target.files[0]
    fr.readAsDataURL(file)
  }
  fr.onload = function() {
    img.src = fr.result
  }
</script>

未提交前

提交后

“js前端上傳文件縮略圖技巧有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！