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)

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

Logo

前往低代码交流专区

更多推荐