前端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格式字符串提交给后端

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容