前端 Vue.js 实践 图片文件转base64方法

html

<el-table-column prop="img" label="img">
            <template slot-scope="scope">
              <el-upload
                v-model="scope.row.img"
                class="avatar-uploader"
                action="#"
                :on-change="file => getFile(file, scope.row)"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :auto-upload="false">
                <img v-if="scope.row.img" :src="scope.row.img" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </template>
          </el-table-column>

script

data () {
    return {
      List: null,
      imageUrl: '',
      img: null
    }
  },
  methods: {
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    getFile (file, fileList) {
      this.getBase64(file.raw).then(res => {
        this.monsterList[fileList.id - 1].img = res
        for (var i = 0; i < this.List.length; i++) {
          axios.post('/api/xxxxx', {
            XXX:XXXXXXXXXX
            ......
            ......
          })
        }
      })
    },
    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)
        }
      })
    }
  }