图片上传前预览

• 原生展示

// js
    great () {
      this.$refs.saveImage.onchange = () => {
        var imgFile = this.$refs.saveImage.files[0]
        var fr = new FileReader()
        fr.onload = () => {
          this.$refs.abc.src = fr.result
        }
        fr.readAsDataURL(imgFile)
      }
    },

ElementUI组件展示

    
      选取文件
      上传到服务器
      

        

          
          
          
        
      
    

// js
export default {
  data () {
    return {
      fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }]
    }
  },
  methods: {
    submitUpload () {
      this.$refs.upload.submit()
    },
    changeHandle (file, fileList) {
      const reader = new FileReader()
      reader.readAsDataURL(file.raw)
      reader.onload = () => {
        fileList.forEach(item => {
          if (item.name === file.name) {
            item.url = reader.result
          }
        })
        this.fileList = fileList
      }
    },
    deleteItem (index) {
      this.fileList.splice(index, 1)
    }

  }
}

image.png

将文件转换为base64