使用vue的element-ui的图片或者文件上传转为base64来处理

1.先引入element-ui的组件

<template>
  <div>
    <div class="touxiang">
      <div class="pic">
        <img
          v-if="imageUrl"
          :src="imageUrl ? '' + imageUrl : '@/assets/avatar.gif'"
          class="avatar"
        />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </div>
      <el-upload
        class="avatar-uploader"
        list-type="picture"
        ref="upload"
        accept=".jpg, .png"
        :limit="1"
        :auto-upload="false"
        :show-file-list="false"
        :file-list="fileList"
        :on-change="getFile"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过2MB
        </div>
      </el-upload>
    </div>
    <button size="small" type="primary" @click="loginClick">跳转</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 上传头像地址
      imageUrl: "",
      //接收上传的文件
      fileList: [],
    };
  },
  methods: {
    //头像上传
    getFile(file, fileList) {
      if (this.beforeAvatarUpload(file)) {
        this.getBase64(file.raw).then((res) => {
          this.imageUrl = res;
          //ruleForm是我接收后端传过来的数据，此处可以忽略
          this.ruleForm.imagePath = res;
        });
      }
    },

    //这里是文件转base64
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        const 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);
        };
      });
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    loginClick() {
      this.$router.push("/login");
    },
  },
};
</script>
<style scoped lang="scss">
.touxiang {
  margin: 30px auto 30px 150px;
  display: flex;
  .avatar-uploader {
    ::v-deep .el-upload {
      margin-top: 5px;
      height: 45px;
      display: flex;
      flex-direction: column;
      align-content: space-between;
    }
    ::v-deep .el-button {
      width: 90px;
      height: 35px;
      font-size: 15px;
    }
  }
  .pic {
    margin-right: 20px;
    border-radius: 50%;
    border: 1px dashed gray;
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 80px;
      height: 80px;
      line-height: 80px;
      text-align: center;
    }
    .avatar {
      border-radius: 50%;
      width: 80px;
      height: 80px;
      display: block;
    }
  }
}
</style>

2.文件上传的代码

<template>
  <div>
    <div class="touxiang">
       <div class="file">
      <el-upload
        class="upload-demo"
        ref="upload"
        action=""
        :on-change="httpRequest"
        :on-remove="httpRequest"
        :file-list="fileList"
        :auto-upload="false"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
      </el-upload>
    </div>
    <button size="small" type="primary" @click="loginClick">跳转</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 上传头像地址
      imageUrl: "",
      //接收上传的文件
      fileList: [],
      userInfo: {},
      upLoadFile: [],
    };
  },
  methods: {
    async httpRequest(file, fileList) {
      this.upLoadFile = [];
      for (let i in fileList) {
        this.upLoadFile[i] = await this.getBase64(fileList[i].raw);
      }
      console.log("上传文件列表", this.upLoadFile);
    },
    // 转base64码
    getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        let fileResult = "";
        reader.readAsDataURL(file);
        // 开始转
        reader.onload = () => {
          fileResult = reader.result;
        };
        // 转 失败
        reader.onerror = (error) => {
          reject(error);
        };
        // 转 结束
        reader.onloadend = () => {
          resolve(fileResult);
        };
      });
    },
  },
};
</script>
<style scoped lang="scss">
.touxiang {
  margin: 30px auto 30px 150px;
  display: flex;
  .avatar-uploader {
    ::v-deep .el-upload {
      margin-top: 5px;
      height: 45px;
      display: flex;
      flex-direction: column;
      align-content: space-between;
    }
    ::v-deep .el-button {
      width: 90px;
      height: 35px;
      font-size: 15px;
    }
  }
  .pic {
    margin-right: 20px;
    border-radius: 50%;
    border: 1px dashed gray;
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 80px;
      height: 80px;
      line-height: 80px;
      text-align: center;
    }
    .avatar {
      border-radius: 50%;
      width: 80px;
      height: 80px;
      display: block;
    }
  }
}
</style>