vue + axios 实现图片上传转为 base64 格式或者二进制（Blob）格式

<template>
    <div class="upload">
        <HHeader :title="'验证身份'" :To="'/Me'"></HHeader>
        <div class="idCard">
            <label for="" type="button" class="idInput">
              <p>请上传身份证照片</p>
              <input type="file" accept="image/*" ref="uploadId" @change="uploadId" multiple/>
            </label>
            <span v-if="idFileChoose">还未选择任何文件</span>
            <span v-else>已选择</span>
            <!-- <p>请上传身份证照片</p>
              <input type="file" accept="image/*" ref="uploadId" @change="uploadId" multiple/> -->
        </div>
        <div class="stuCard">
          <label for="" type="button" class="stuInput">
            <p>请上传学生证照片</p>
            <input type="file" accept="image/*" ref="uploadStu" @change="uploadStu"  multiple/>
          </label>
          <span v-if="stuFileChoose">还未选择任何文件</span>
          <span v-else>已选择</span>
        </div>
        <el-button @click="commit" class="button">验证</el-button>
    </div>
</template>

在 @change 的时候，触发事件

<script>
import axios from 'axios'
export default {
  data () {
    return {
      idCard: '',
      stuCard: '',
      idFileChoose: true,
      stuFileChoose: true
    }
  },
  methods: {
    uploadId () {
      let data = this.$refs.uploadId.files[0]
      this.getBase64(data).then(res => {
        this.idCard = res
        // console.log(res)
      })
      this.$message({
        type: 'success',
        message: '上传成功',
        offset: 50
      })
      this.idFileChoose = false
    },
    uploadStu () {
      let data = this.$refs.uploadStu.files[0]
      this.getBase64(data).then(res => {
        this.stuCard = res
      })
      this.$message({
        type: 'success',
        message: '上传成功',
        offset: 50
      })
      this.stuFileChoose = false
    },
    // base64 格式
    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)
        }
      })
    },
    // 二进制格式
    dataURItoBlob (dataURI) {
      // base64 解码
      let byteString = window.atob(dataURI.split(',')[1])
      let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
      let ab = new ArrayBuffer(byteString.length)
      let ia = new Uint8Array(ab)
      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i)
      }
      return new Blob([ab], {type: mimeString})
    },
    commit () {
      let idCard = this.dataURItoBlob(this.idCard)
      let stuCard = this.dataURItoBlob(this.stuCard)
      var formdata = new FormData()
      formdata.append('idCard', idCard)
      formdata.append('stuCard', stuCard)
      console.log(idCard, stuCard)
      axios.post('/api/idCard', formdata, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
        console.log(response)
        if (response.status === 200) {
          this.$message({
            type: 'success',
            message: response.data,
            offset: 50
          })
        } else {
          this.$message({
            type: 'error',
            message: '验证异常，请稍后再试',
            offset: 50
          })
        }
      })
    }
  }
}
</script>

style

<style lang="less" scoped>
@import url('../../../assets/styles/me.less');
.upload {
    width: 100%;
    height: 100%;
    margin-top: 50px;
    .idCard {
        position: relative;
        margin: 20px;
        border: 1px dashed #ccc;
        width: 300px;
        height: 70px;
        padding-left: 20px;
        padding-top: 20px;
        .idInput {
          .inputClass();
          p {
              margin-bottom: 10px;
          }
        }
        span {
          position: absolute;
          top: 30px;
          left: 150px;
          color: #ccc;
        }
    }
    .stuCard {
        position: relative;
        margin: 20px;
        border: 1px dashed #ccc;
        width: 300px;
        height: 70px;
        padding-left: 20px;
        padding-top: 20px;
        .stuInput {
          .inputClass();
        }
        p {
            margin-bottom: 10px;
        }
        span {
          position: absolute;
          top: 30px;
          left: 150px;
          color: #ccc;
        }
    }
    .button {
        margin-left: 140px;
    }
}
</style>

me.less

  .inputClass {
    position: relative;
    display: inline-block;
    width: 125px;
    height: 30px;
    overflow: hidden;
    text-align: center;
    font-size: 14px;
    line-height: 30px;
    vertical-align: center;
    border: 1px solid rgb(94, 208, 247);
    background-color: rgb(94, 208, 247);
    color: aliceblue;
    border-radius: 3px;
    input {
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
  }

关注公众号：大明贵妇，无套路获取前端学习资料，期待各位客官来临