项目中上传图片

总结下在vue项目中关于上传图片的需求:
获取用户的预览图片，生成预览图片链接
input在file类型下会自动显示上传文件

代码：：：

 <img  ref="preview-image" />
 <input
  ref="file"
   type="file" //file类型
   id="file" //  为了和labal中的for结合使用
   hidden // 因为它的样式比较难设置，一般会让hidden
   @change="onFileChange" // 本身带有change事件
 />

 onFileChange() {
      // input 本身有一个change事件，@change
      // 拿到input这个操作节点$refs
      // 获取将要预览的图片 ==> const file = this.$refs.files[0]
      // 可以先打印一下此段日志
      console.log(this.$refs.file.files)//FileList {0: File, length: 1}
      // 取files的第一位即拿到了客户预览的图片文件
      const file = this.$refs.file.files[0]
      // 生成预览图片链接 ==> window.URL.createObjectURL(file)
      const blobData = window.URL.createObjectURL(file)
      // 操作图片DOM节点
      this.$refs['perview-img'].src = blobData
      // 为了防止用户选择同一张图片不触发change事件 ==> this.$refs.file.value = ''
      // this.$refs.file.value = ''
    },