最简单的vue上传图片

<template>
    <img :src="f.src" v-if="f" />
    <img src="../../assets/zz.jpg" @click="add" v-else/>
    <input class="value" style="display:none" type="file" ref="file" accept="image/*" multiple="multiple" @change="getFile($event)" />
</template>
<script>
    export default {
  data () {
    return {
      'file': null,
      'f': null
    }
  },
  methods: {
    add () {
      this.$refs.file.click()
    },
    getFile (event) {
      this.file = event.target.files[0]
      const item = {
        name: this.file.name,
        size: this.file.size,
        file: this.file
      }
      this.html5Reader(this.file, item)
      this.f = item
    },
    // 将图片文件转成BASE64格式
    html5Reader (file, item) {
      const reader = new FileReader()
      reader.onload = (e) => {
        this.$set(item, 'src', e.target.result)
      }
      reader.readAsDataURL(file)
    },
    submitForm (event) {
      event.preventDefault()
      let formData = new FormData()
      formData.append('file', this.file)
      let config = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      this.axios.post('http://127.0.0.1/index/index/upload', formData, config).then(function (res) {
        console.log(res)
        if (res.status === 200) {
        }
      })
    }
  }
}
</script>