图片base64转换

山下人394

已于 2023-06-08 15:37:57 修改

阅读量347

点赞数

文章标签： javascript servlet html

于 2022-10-26 15:24:44 首次发布

本文链接：https://blog.csdn.net/qq_68410134/article/details/127532666

版权

//获取图片的base64

  <el-form-item>

          <el-upload

            action=""

            :on-change="getFile"

            :limit="1"

            :auto-upload="false"

            ref="ImgUpload"

          >

            <u v-show="!imgData" style="color: #409eff">

              上传封面

            </u>

            <div v-show="imgData">

              <img :src="imgData" width="290px" height="150px" />

            </div>

          </el-upload>

        </el-form-item>

  getFile(file, fileList) {

      const isLt1M = file.raw.size / 1024 / 1024 < 1;

      if (!isLt1M) {

        this.$message.error("上传的图片大小不能超过 1MB!!");

        this.$refs["ImgUpload"].clearFiles();

        return;

      }

      this.getBase64(file.raw).then((res) => {

        this.imgData=

          "data:image/jpg;base64," + res.split(",")[1];

      });

    

      this.$refs["ImgUpload"].clearFiles();

    },

    getBase64(file) {

      return new Promise(function (resolve, reject) {

        let reader = new FileReader();

        let imgResult = "";

        reader.readAsDataURL(file);

        reader.onload = function () {

          imgResult = reader.result;

        };

        reader.onerror = function (error) {

          reject(error);

        };

        reader.onloadend = function () {

          resolve(imgResult);

        };

      });

    },