前端js实现将图片转化为后端要求的base64字符串格式的图片

1.获取图片文文件

 html结构代码

 <input type="file" ref="file" @change="fileChange" />

在监听input的change事件中获取到用户选择的图片文件

 async fileChange() {
      //获取图片文件对象
      const file = this.$refs.file.files[0]
      //调用封装的getBase64方法，将图片文件转化base64格式的字符串
      const baseResult = await this.getBase64(file)
      console.log(baseResult)
    }

2.利用promise封装一个将图片文件转化为后端要求的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)
        }
      })
    }

3.根据后端提供的api将base64格式字符串提交给后端