elementui图片上传转为base64字符串

五颜六色的黑

已于 2023-09-05 09:36:50 修改

阅读量2.1k

点赞数

分类专栏： element-ui 文章标签： elementui 前端 javascript

于 2023-09-05 09:36:03 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_38483133/article/details/132684838

版权

element-ui 专栏收录该内容

9 篇文章

订阅专栏

本文讲述了前端如何使用HTML和JavaScript实现图片文件的上传，并在后端以Base64字符串形式传递。通过FileReaderAPI进行文件转码，Promise结构确保异步操作的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：后端需要将上传的图片文件作为base64字符串的方式传参给他。

html代码

      <div class="upload_box">
                  <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="#"
                    :show-file-list="false"
                    :http-request="
                      (file) => {
                        return httpRequest(file, item);
                      }
                    "
                   
                    style="display: inline-block"
                  >
                    <img
                      v-if="item.darkBg"
                      :src="'data:image/jpg;base64,' + item.darkBg"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>

js代码

    httpRequest(data, item) {
      
      // 转base64

      this.getBase64(data.file).then((resBase64) => {
        item.darkBg = resBase64.split(",")[1];
      });
    },

    // 转base64编码
    getBase64(file) {
      this.dialogVisible = false;
      return new Promise((resolve, reject) => {
        let reader = new FileReader();
        let fileResult = "";
        reader.readAsDataURL(file); //开始转
        reader.onload = function () {
          fileResult = reader.result;
        };
        //转失败
        reader.onerror = function (error) {
          reject(error);
        };
        //转结束 resolve 出去
        reader.onloadend = function () {
          resolve(fileResult);
        };
      });
    },