iview upload 上傳圖片 不傳服務器 轉 base64

 開始的時候 找不到this了，後來想起來要用 ES6的箭頭函數 就有this了

reader.onload = e => { // 讀取到的圖片base64 數據編碼 將此編碼字符串傳給後臺便可 // console.info('e', e) // console.info('e.target.result', e.target.result) // console.info('modalVmodel', format)
          this.base64 = e.target.result // console.info('this.base64', _this.base64)
        }

 

-----------------------

<!--
* @description 上傳圖片 * @fileName camera.vue * @author 彭成剛 * @date 2019/03/18 10:17:04
* @version V1.0.0
!-->
<template>
  <div>
    <Drawer title="上傳照片"
            class="uploadPhotoDrawerClass" v-model="drawerVmodel" width="550" :mask-closable="false">
      <div class='divFormClass'>

        <Upload :action="'localhost'" :show-upload-list="false"
                ref='upload' name="uploadFile" type="drag" :before-upload="handleBeforeUpload">
          <!-- :data='upData' -->
          <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>選擇 jpg 文件</p>
          </div>

        </Upload>
        <div style="margin:10px;">{{xFile.name}}</div>

      </div>
      <div class='demo-drawer-footer'>
        <Button @click="modalCancel" style='margin-right:10px;'>關閉</Button>

        <Button type="primary" @click="modalSave">保存</Button>

      </div>
    </Drawer>
    <!-- <Modal @on-cancel="modalCancel"
           class="uploadPhoto" v-model="modalVmodel" width="900" :mask-closable="false" title="上傳圖片">
      <div class='divFormClass'>
        111
      </div>

      <div slot="footer">
        <Button @click="modalCancel">關閉</Button>

        <Button type="primary" @click="modalSave">保存</Button>

      </div>
    </Modal> -->
  </div>
</template>

<script> export default { data () { return { xFile: { name: '' }, base64: '', drawerVmodel: false, modalVmodel: false } }, components: {}, computed: {}, mounted () { this.drawerVmodel = true }, methods: { handleBeforeUpload (item) { let _this = this let warningStr = '' let format = ['jpg'] if (this.checkFormat(item.name, format)) { warningStr += '文件格式不符，請上傳jpg格式 ' } if (this.checkSize(item.size, 5)) { warningStr += '文件大小超過5M，請檢查後從新上傳！' } if (warningStr.length !== 0) { this.$Message.warning({ content: warningStr, duration: 3, closable: true }) } if (warningStr.length === 0) { this.xFile = item console.info('this.xFile', this.xFile) let reader = new FileReader() reader.readAsDataURL(item) // console.info('reader', item)
        reader.onload = function (e) { // 讀取到的圖片base64 數據編碼 將此編碼字符串傳給後臺便可 // console.info('e', e) // console.info('e.target.result', e.target.result) // console.info('modalVmodel', format)
          _this.base64 = e.target.result // console.info('this.base64', _this.base64)
 } } return false }, checkSize (size, maxSize) { // size 單位是byte maxSize 單位是mb
      let maxSizeByte = maxSize * 1024 * 1024
      if (size > maxSizeByte) { return true } else { return false } }, checkFormat (fileName, format) { let index = fileName.lastIndexOf('.') let suffix = fileName.substr(index + 1) // console.info('suffix', suffix)
      let ret = true format.some((item, index, arr) => { if (item === suffix) { ret = false } }) return ret }, modalCancel () { this.drawerVmodel = false }, modalSave () { console.info('this.base64', this.base64) if (this.base64 === '') { this.$Message.warning('未上傳照片') } else { this.$emit('save-base64', this.base64) } this.modalCancel() } } } </script>
<style lang='less'> .ivu-message { z-index: 3000 !important; } // .uploadPhoto { // .divFormClass { // height: calc(~"100vh - 350px"); // overflow-y: auto; // padding-right: 15px; // } // }
.uploadPhotoDrawerClass { .ivu-drawer-mask { z-index: 2000 !important; } .ivu-drawer-wrap { z-index: 2000 !important; } .demo-drawer-footer { width: 100%; position: absolute; bottom: 0; left: 0; border-top: 1px solid #e8e8e8; padding: 10px 16px; text-align: right; background: #fff; } .divFormClass { height: calc(~"100vh - 140px"); overflow-y: auto; padding-right: 15px; } } </style>