iview -- 上傳圖片

加載後端傳回的base64格式的圖片文件，

<img src="data:image/jpeg;base64,xxxxxxxxxxxxxxxxxxx" alt="" />

注意：但是這種方法不兼容IE6/7，使用時要注意！

<template>
  <div>
    <div class="imageWrap">
      <img :src="insideSrc" alt="">
    </div>
    <Upload
      action="image/upload"
      :accept="acceptFile"
      :before-upload="beforeUpload">
      <Button style="width: 150px;" type="primary">上傳圖片</Button>
    </Upload>
  </div>
</template>
<script>
export default {
  name: 'ImageUpload',
  data () {
    return {
      // 展示選中的的imageSrc
      insideSrc: '',
      // 接受上傳的文件類型
      acceptFile: 'image/png,image/jpeg'
    }
  },
  methods: {
    beforeUpload (file) {
      if (!this.acceptFile.split(',').includes(file.type)) {
        this.$Message.warning('未選中圖片格式的文件')
        return false
      }
      if (file.size / 1024 > this.maxSize) {
        this.$Message.warning(`文件大小超過了${this.maxSize}KB`)
        return false
      }
      // 轉換爲base64
      const reader = new FileReader()
      // 將讀取到的文件編碼成Data URL
      reader.readAsDataURL(file)
      reader.onload = (event) => {
        this.insideSrc = event.srcElement.result
      }
      // 若返回 false 則停止上傳,此時中斷則判斷大小無法使用max-size屬性判斷
      return false
    }
  }
}
</script>
<style scoped>
.imageWrap {
  width: 100%;
  height: 200px;
  border: 1px solid red;
}
</style>