無需服務器即可將映像轉換為base64

Question

我正在使用Pinterest Javascript SDK嘗試創建圖釘。 設置圖像的參數之一。

image -使用多部分表單數據上傳您要固定的圖片

image_url要固定的圖像的鏈接，或者

image_base64 -Base64編碼圖像的鏈接

我正在嘗試從客戶端創建Pin，而無需通過服務器。 我的表格很簡單：

<div class="file-upload">
  <input type="file" name="fileToUpload" id="fileToUpload">
</div>

我讀到的價值

const imageUrl = document.getElementById('fileToUpload').value;

我已經嘗試過使用image和image_url參數來發送該值（ imageUrl ），但是由於該值解析為硬盤驅動器上的某個位置，因此無法正常工作（可能是預期的）。

因此，現在我必須嘗試找出如何使用image_base64選項，這意味着我需要在用戶計算機上將圖像轉換為base64。

我該怎么做呢？ 還是更好，如果有人知道如何使用image參數，那我認為會更好

Answer 1

可以使用change附加到事件<input type="file">元素， FileReader轉換File對象在<input type="file">元件.files屬性到一個data URI或base64的部分data URI內change事件處理程序

 <div class="file-upload"> <input type="file" name="fileToUpload" id="fileToUpload"> </div> <script> const input = document.getElementById("fileToUpload"); const reader = new FileReader; reader.onload = () => { const dataURL = reader.result; const base64 = reader.result.split(",").pop(); console.log(dataURL, base64); } input.onchange = () => { reader.abort(); reader.readAsDataURL(input.files[0]); } </script>