js中文件转为base64，以及FileReader的使用

yy_33404590

已于 2022-11-15 16:23:41 修改

阅读量642

点赞数 1

文章标签： javascript 前端开发语言

于 2022-10-19 17:29:58 首次发布

本文链接：https://blog.csdn.net/qq_33404590/article/details/127411829

版权

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
    .obj {
        width: 10%;
        height: 10%;
    }
</style>

<head>
    <title></title>
    <script type="text/javascript">
        function ProcessFile(e) {
            var file = document.getElementById('file').files[0];
            if (file) {
                var reader = new FileReader();
                reader.onload = function (event) { // 文件所有信息加载结束后
                    var txt = event.target.result;
                    var img = document.createElement("img");
                    img.src = txt;//将图片base64字符串赋值给img的src
                    document.getElementById("result").appendChild(img);
                    };
            }
            reader.readAsDataURL(file); // 可以将文件转为base64编码 
        }

        function handleFiles() {
            var files = document.getElementById('file').files
            var preview = document.getElementById('result')

            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var imageType = /^image\//;
                if (!imageType.test(file.type)) {
                    continue;
                }
                var img = document.createElement("img");
                img.classList.add("obj");
                img.file = file;
                preview.appendChild(img); // 假设"preview"就是用来显示内容的 div

                var reader = new FileReader();
                reader.onload = (function (aImg) { return function (e) { aImg.src = e.target.result; }; })(img);
                reader.readAsDataURL(file);
            }
        }

        function contentLoaded() {
            document.getElementById('file').addEventListener('change',
                handleFiles, false);
        }

        window.addEventListener("DOMContentLoaded", contentLoaded, false);
    </script>
</head>

<body>
    请选取一个图像文件: <input type="file"  id="file" name="file" />
    <div id="result"></div>

  请选取多个图像文件: <input type="file" multiple  id="file" name="file" />
    <div id="result"></div>
</body>

</html>

经过上述处理，img会以base64编码的形式作为src导入指定的位置

在el-upload中上传图片的base64编码

场景：在与后端交互时候，需要传递图片的base64编码，借鉴网友的做法使用promise封装，便于日后使用

el-upload
    action="#"  // 必填，需要发送的地址
    multiple
    :file-list="fileList"
    :limit="3"
   :http-request="httpRequest"       // 获取图片的base64编码
    :on-exceed="handleExceed"
    :on-change="(file, fileList) => handleChange(file,fileList, param)"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>


// vue中methods , 可以处理单文件上传和多文件上传
 httpRequest(file) {
      let self = this;
      let reader = new FileReader();
      reader.readAsDataURL(file.file);
      reader.onload = function (e) {
        let img_base64 = e.target.result;
        // 自定义数组对象，传给后台的数据
        let a = {
          name: file.file.name,
          base64str: img_base64,
        };
       self.xxx.push(a); // 注意这里的this会丢失
      };
    },


// 补充下handleChange的传参问题
handleChange(file, fileList, param) {
// console.log(file, fileList, param)
}

问题：在upload组件中设置自定义上传时候，出现xxx.push前面为undefined

解决办法：取消自动上传功能，在onChange中设置处理方式，并使用定时器处理异步返回的时间延迟


 <el-upload
    class="upload-demo"
    action="#"
    multiple
    :limit="3"
    :on-exceed="handleExceed"
    :on-change="handleChange"
    :file-list="formModule[formItem.prop][item.prop]" // 绑定的数据
    :auto-upload="false"  // 手动上传
  >
    <i slot="default" class="el-icon-plus"></i>
  </el-upload>
 // 上传图片数据
    handleChange(file, fileList) {
      if (file.status != "ready") {
        return false;
      } 
      const rr = [];
      fileList.forEach((item) => {
        this.getBase64(item.raw).then((res) => {
          item.url = res; 
          rr.push({ name: item.name, base64str: res });
        });
      });
      //转换base64是异步方式需要一些时间  这里赋值建议延迟一下
      setTimeout(() => {
        this.formModule.signatureInfo.imgs = rr;
      }, 1000);
    },
    getBase64(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader(); //定义方法读取文件
        reader.readAsDataURL(file); //开始读文件  本身是图片的二进制数据 进行base64加密形成字符串
        reader.onload = () => resolve(reader.result); //成功返回对应的值 reader.result可以直接放在img标签中使用
        reader.onerror = () => reject(error); //失败返回失败信息
      });
    },