vue实现图片文件的显示和上传

<template>
  <div>
    <button @click="selectFile">选择图片</button>
    <img :src="img" v-show="img">
    <input type="file" ref="file" style="display:none;" @change="fileChange">
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: ''
    }
  },
  methods: {
    // 选择文件
    selectFile(){
      this.$refs.file.click()
    },
    // 文件选择后触发
    fileChange(e){
      // 通过DOM取文件数据
      const file = this.$refs.file.files[0]
      // 计算文件大小 KB
      const size = Math.floor(file.size / 1024)
      // 显示本地图片
      this.img = window.URL.createObjectURL(file)

      // 使用 FormData 构建表单数据
      const formData = new FormData()
      formData.append('file', file)
      // 这里使用 axios 上传文件
      this.$axios.post('common/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        // ...
      })

      // 显示上传进度
      /*this.$axios({
        method: 'post',
        url: 'common/upload',
        data: formData,
        headers: { 'Content-Type': 'multipart/form-data' },
        onUploadProgress(progressEvent){
            if (progressEvent.lengthComputable) {
                let val = (progressEvent.loaded / progressEvent.total * 100).toFixed(0);
                // ...
            }
        }
        })*/
    }
  },
}
</script>