vue + vue-element 实现base64文件上传(作者已实践)

一、使用element-ui中的upload组件

 
    
        // 文件上传组件
        
            
                
                
             
             
			 // 图片展示
             
         
    
 

二、定义data

data() {
	return {
		userInfo: {}
	}
}

三、编写方法

// 用于获取base64字符
getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function() {
          imgResult = reader.result
        }
        reader.onerror = function(error) {
          reject(error)
        }
        reader.onloadend = function() {
          resolve(imgResult)
        }
      })
    },
    // 文件校验
    verifyFile(file) {
      return new Promise((resolve, reject) => {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
          reject('上传头像图片只能是 [jpg, png, gif] 格式!')
        }
        if (!isLt2M) {
          reject('上传头像图片大小不能超过 2MB!')
        }
        resolve(isJPG && isLt2M)
      })
    },
    // upload组件触发改变的事件
    getFile(file, fileList) {
      // 清除上一次选择的文件 避免后面不在触发此事件
      this.$refs['updload_avatar'].clearFiles()

      // 文件格式及大小校验、获取base64
      this.verifyFile(file.raw).then(resp => {
        return this.getBase64(file.raw)
      }).then(resp => {
        // 这里强调一下为什么是使用这种方式而不是使用
        // this.userInfo.accountImg = resp
        // 因为vue 数据监测不到对象深处的数据更改，所以需要使用$set通知一下vue
        // 不这样写会导致页面中的图片展示不生效
        this.$set(this.userInfo, 'accountImg', resp)
      }).catch(err => {
        this.$message(err)
      })
    }

四、效果展示

base上传演示