快捷導(dǎo)航

js前端上傳文件縮略圖技巧示例詳解

更新時間：2023年03月26日 14:25:14 作者：Yu_uY

這篇文章主要為大家介紹了js前端上傳文件縮略圖技巧示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

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

當(dāng)我們要獲取用戶上傳的文件，可以使用input表單項(xiàng)，將type屬性值設(shè)置為“file”。

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

同時，我們?yōu)楸韱雾?xiàng)綁定change事件，當(dāng)用戶上傳文件時，我們就可以在事件對象中獲取到用戶上傳的文件。

<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標(biāo)簽中增加multiple屬性）。

文件對象簡介

在學(xué)習(xí)上傳文件前，我們先簡單了解四個與文件相關(guān)的內(nèi)置對象。

Blob

Blob是一個存儲二進(jìn)制的對象，實(shí)際上很少直接使用這個對象。

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對象進(jìn)行切片，返回新的Blob對象。
可以用這個方法實(shí)現(xiàn)大文件切片上傳。

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

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

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

var fr = new FileReader();

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

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

readAsText()，將 Blob 或者 File 對象根據(jù)特殊的編碼格式轉(zhuǎn)化為內(nèi)容 (字符串形式)。

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

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

<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ù)據(jù)的鍵值對 key/value 的構(gòu)造方式。
在<form>標(biāo)簽中，我們直接點(diǎn)擊提交按鈕，瀏覽器會以默認(rèn)以x-www-form-urlencoded的數(shù)據(jù)格式向服務(wù)器提交數(shù)據(jù)。
當(dāng)我們?yōu)?code>form標(biāo)簽設(shè)置enctype屬性時，可以設(shè)置發(fā)送的數(shù)據(jù)格式。

<!-- 
application/x-www-form-urlencoded 在發(fā)送前編碼所有字符（默認(rèn)）
multipart/form-data  不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值
text/plain           空格轉(zhuǎn)換為 "+" 加號，但不對特殊字符編碼。
-->
<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ù)據(jù)格式向服務(wù)器發(fā)送表單數(shù)據(jù)，但我們使用框架來編寫業(yè)務(wù)時，我們不會直接使用表單提交數(shù)據(jù)，通常都是將表單中的數(shù)據(jù)提取出來，手動構(gòu)建出相應(yīng)的數(shù)據(jù)格式，再用aixos發(fā)送給服務(wù)器，所以我們需要主動使用FormData對象封裝file對象

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

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

文件對象之間的關(guān)系

由上圖可以看出，當(dāng)我們通過input標(biāo)簽上傳文件時，我們可以得到一個file對象，file對象與blob對象可以互相轉(zhuǎn)換，但要將文件對象上傳給服務(wù)器則是不允許的，因?yàn)楹蠖藷o法識別這種對象，因此我們需要將文件對象包裝成formdata對象，或者轉(zhuǎn)換為base64等文本格式再傳給后端。

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

縮略圖的實(shí)現(xiàn)

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

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

<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>

未提交前

提交后

總結(jié)

前端上傳文件時需要使用FormData對象對文件進(jìn)行包裝后才能傳給服務(wù)器。
獲取用戶上傳的圖片后，使用FileReader對象中提供的readAsDataUrl()方法，將圖片轉(zhuǎn)化為base64格式，再將base64編碼讓img標(biāo)簽加載，實(shí)現(xiàn)縮略圖的效果。

以上就是js前端上傳文件縮略圖技巧示例詳解的詳細(xì)內(nèi)容，更多關(guān)于js前端上傳文件縮略圖的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: