1、input上传图片获取file文件类型

<template>
  <div>
    <input ref="inputFile" type="file" @change="upload">
  </div>
</template>

<script>
  import pubsub from "pubsub-js"
  export default {
    name: 'bus',
    methods:{
      upload(){
        // 发送消息
        pubsub.publish('uploadImg',this.$refs.inputFile.files)
      }
    },
  }
</script>

<style lang="sass" scoped>

</style>

2、将file文件类型转为url

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <img :src="imgUrl" alt="">
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import pubsub from "pubsub-js"

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      // pubsub订阅消息的id
      pubsub: '',
      // 图片地址
      imgUrl:''
    }
  },
  mounted() {
    // 订阅消息
    this.pubId = pubsub.subscribe('uploadImg', (msgName, data) => {
      // msgName：消息名
      // data：接收的数据
      // 将File文件类型转为url
      this.imgUrl = this.getObjectURL(data[0]);
      console.log(this.imgUrl);
    })
  },
  methods: {
    // 将File文件类型转为url
    getObjectURL(file) {
      var url = null;
      if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    },
  },
  beforeDestroy() {
    // 取消订阅
    pubsub.unsubscribe(this.pubId)
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3、将file文件类型转为base64

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <img :src="imgUrl" alt="">
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import pubsub from "pubsub-js"

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      // pubsub订阅消息的id
      pubsub: '',
      // 图片地址
      imgUrl: ''
    }
  },
  mounted() {
    // 订阅消息
    this.pubId = pubsub.subscribe('uploadImg', (msgName, data) => {
      // msgName：消息名
      // data：接收的数据
      // 将File文件类型转为base64图片
      this.getFileBase64(data[0]).then(res=>{
        this.imgUrl = res
        console.log(this.imgUrl);
      });
    })
  },
  methods: {
    // 将File文件类型转为base64图片
    getFileBase64(file) {
      return new Promise((resolve) => {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function() {
          resolve(reader.result)
        }
      })
    },
  },
  beforeDestroy() {
    // 取消订阅
    pubsub.unsubscribe(this.pubId)
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3、先将file文件类型转为base64图片，再将base64图片转为file类型文件，最后再转为url

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <img :src="imgUrl" alt="">
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import pubsub from "pubsub-js"

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      // pubsub订阅消息的id
      pubsub: '',
      // 图片地址
      imgUrl: ''
    }
  },
  mounted() {
    // 订阅消息
    this.pubId = pubsub.subscribe('uploadImg', (msgName, data) => {
      // msgName：消息名
      // data：接收的数据
      // 先将File文件类型转为base64图片
      this.getFileBase64(data[0]).then(res=>{
        // 再将base64图片转为File文件类型（base64ToFile），最后将File文件类型转为url（getObjectURL）
        this.imgUrl = this.getObjectURL(this.base64ToFile(res))
        console.log(this.imgUrl);
      });
    })
  },
  methods: {
    // 将File文件类型转为url
    getObjectURL(file) {
      var url = null;
      if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    },

    // 将File文件类型转为base64图片
    getFileBase64(file) {
      return new Promise((resolve) => {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onloadend = function() {
          resolve(reader.result)
        }
      })
    },

    // 将base64图片转为File文件类型
    base64ToFile(urlData, fileName) {
      let arr = urlData.split(',');
      let mime = arr[0].match(/:(.*?);/)[1];
      let bytes = atob(arr[1]); // 解码base64
      let n = bytes.length
      let ia = new Uint8Array(n);
      while (n--) {
        ia[n] = bytes.charCodeAt(n);
      }
      return new File([ia], fileName, { type: mime });
    }
  },
  beforeDestroy() {
    // 取消订阅
    pubsub.unsubscribe(this.pubId)
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>