使用JavaScript将图片转换为Base64编码 - WebCat - 常规

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>WebCat</title>
    <style>
      #preview{
        max-width:80%;
      }
    </style>
  </head>
  <body>    
    <input type="file" />
    <img src="" id="preview" alt=""/>
    <script>
    function BASE64(file){
        return new Promise((resolve, reject) => {
          var reader = new FileReader();
          reader.onload = (e) =>{
            resolve(e.target.result);
          }
          reader.onerror = (error) => {
            reject(error);
          }
          reader.readAsDataURL(file);
        });
      }
      var inp = document.querySelector("input");
      inp.onchange = async function(){
        try {
          preview.src = await BASE64(inp.files[0]);
        } catch (error) {
          console.error(error);
        }
      }
    </script>
  </body>
</html>