vue axios上传base64文件数据，后台无法获取获取到数据

1.html标签

accept设置为"image/png,image/gif,image/jpeg"，以接受图片文件

<input class="upload-file" @change="handleUpload($event)" type="file" id="imgUploader" accept="image/png,image/gif,image/jpeg">

2.完整代码

axios的post请求需放在onload中，否则后台接受不到base64转化后的数据。

<template>
  <div class="upload-form">
    <div class="upload-block">
      <label class="upload-label">
        <i class="icon icon-plus"></i>
        <img class="upload-img" v-if="upload.src" :src="upload.src" alt="图片">
        <input class="upload-file" @change="handleUpload($event)" type="file" id="imgUploader" accept="image/png,image/gif,image/jpeg">
      </label>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import Toast from 'mint-ui'
import { SUCCESS } from '@/utils/responseStatus'
import Axios from 'axios'
import qs from 'qs'
export default {
  data () {
    return {
      upload: {
        src: '',
        annexId: ''
      },
      annex: {
        FileName: '',
        Extension: '',
        AnnexId: '',
        Base64Str: '',
        Width: 0,
        Height: 0
      }
    }
  },
  methods: {
    handleUpload (e) {
      let that = this
      // 未选择文件，退出
      if (!e.target.files[0]) {
        return
      }
      // 初始化annex
      let file = e.target.files[0]
      // 截取文件名、类型
      let lastIndex = file.name.lastIndexOf('.')
      if (lastIndex !== -1) {
        that.annex.Extension = file.name.substring(lastIndex + 1)
        that.annex.FileName = file.name.substring(0, lastIndex)
      }
      // 转base64
      // 创建一个FileReader
      let reader = new FileReader()
      reader.readAsDataURL(e.target.files[0])
      reader.onload = () => {
        that.upload.src = reader.result
        let idx = reader.result.indexOf(',')
        console.log(reader.result)
        if (idx !== -1) {
          that.annex.Base64Str = reader.result.substring(reader.result.indexOf(',') + 1)
        }
        let img = new Image()
        img.src = reader.result
        img.onload = () => {
          // 文件上传应放在文件读取完成后，否则读取不到base64、width、height
          that.annex.Width = img.width
          that.annex.Height = img.height
          // qs将annex对象转为URI encode字符串
          let params = qs.stringify({ 'annex': that.annex })
          console.log(params)
          Axios.post('/AnnexInfo/UploadAnnex', params, {
            // 设置请求头
            headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }
          }).then(({ data }) => {
            console.log(data)
            if (data.Code === SUCCESS) {
              this.upload.annexId = data.Data
              return
            }
            Toast({
              message: data.Message,
              iconClass: 'icon icon-warning'
            })
          }).catch(err => {
            Toast({
              message: '图片上传失败，原因：' + err,
              iconClass: 'icon icon-warning'
            })
          })
        }
      }
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.upload-form {
  .upload-block {
    padding 5px 0
    display: flex;
    .upload-label {
      position: relative;
      margin: 0 auto;
      width: 100px;
      height: 100px;
      background-color: #f2f2f2;
      border-radius: 8px;
      border: solid 1px #cccccc;
      color: #CCC;
      .icon-plus {
        font-size: 39px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
      .upload-img {
        width: 100%;
        height: 100%;
      }
      .upload-file {
        display: none;
      }
    }
  }
}
</style>