vue项目中将图片转换成base64格式,并且封装方法

vue项目中经常会遇到提交图片的事件,提交图片有两种方式,一个是通过formdata表单格式提交,一种就是提交base64数据流,我更倾向于后者,今天给大家提供一份将图片转为base64的方法

/**
 * 将图片转换成base64格式
 * @param img 图片文件
 * author: Jacky
 */
export function getBase64 (img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}
export default {
  install (Vue, options) {
    Vue.prototype.$getBase64 = getBase64    // 挂载方法
    Vue.prototype.$log = function (...arg) {
      if (process.env.NODE_ENV !== 'production') {
        console.log(...arg)
      }
    }
   }
  }

这个方法可以修改后直接应用在模板里,我这里是直接封装成公共方法了,以上代码是放在公共js文件里的,然后在main.js中引入并使用就可以了

import commonPlugins from './utils/plugins'
Vue.use(commonPlugins)

以上就完成了对该方法的封装,需要的小伙伴们可以去封装啦!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值