開始的時候 找不到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>