上传文件input,file的图片问题(vue)

设置上传文件input ,type="file",因为样式不好看我们现在多半是display: none给隐藏 然后自定义属性,在给个change事件

然后设置button 当点击的时候根据获取的自定义事情会触发input的change事件

触发change事件 " changeImg "函数

changeImg(e){

console.log(e) 是input ,type="file" 里面有个target.files的伪数组存放上传后的照片

}

const files = e.target.files 存下(免得打那么长)

照理说我们拿到了图片 files[0] 存储一个变量 例如avatar里面 可以使用在img src上

<img :src="avatar" alt="">

但是! 但是!! 不行

因为 img 标签的 src 只能设置 URL 和 BASE64

所以我们只有将获取到的文件 file 对象转换成 BASE64 或 URL

这里不得不补充input ,type="file" 里的 

FileReader -> 文件读取器 属性  :里面有几个方法,其中一个readAsDataURL()是转成BASE64格式

然后我们就可以开心的使用了

 // 使用方法:

        //1. 创建对象

        const fr = new FileReader()

       // 2. 读取文件

        fr.readAsDataURL(files[0])

        // 3. 获取读取的结果 事件绑定实现的

        因为文件读取是异步操作

         onload 事件: 当文件读取完成后执行

        fr.onload = (e) => {

          // console.log(e.target.result)

          // 4. 将结果赋值给 this.avatar

          this.avatar = e.target.result

        }

      } else {

        // 用户没有选择图片, 要显示默认图片

        this.avatar = ''

      }

这样就拿到了 BASE64 格式照片

只需要在

img设置src="avatar"就可以了,这里设置2个img,用户上传就是avatar里的,没上传就是默认的

 以上个人理解

另外 还可以利用webpack 来储存  路径 不过自己写有点小BUG 嘿嘿