input标签上传图片及转base64:
<img class="appIcon" :src="addForm.appIconStr">
<input ref="addAppIcon" type="file" @change="Tobase64()">
Tobase64() {
let fileObj = this.$refs.addAppIcon.files[0]
let reader = new FileReader()
reader.readAsDataURL(fileObj)
let _this = this
reader.onload = function(e) {
_this.addForm.appIconStr = e.target.result
}
},
Element-upload 上传图片及转base64:
<el-upload
ref="upload"
class="avatar-uploader"
action="#"
:http-request="httpRequest"
:show-file-list="false"
:before-upload="beforeAvatarUpload">
<img v-if="addForm.appIconStr" :src="addForm.appIconStr" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
httpRequest(obj) {
console.log(obj.file)
debugger
let fileObj = obj.file
let reader = new FileReader()
reader.readAsDataURL(fileObj)
let _this = this
reader.onload = function(e) {
_this.addForm.appIconStr = e.target.result
}
},
beforeAvatarUpload(file) {
debugger
const isPNG = file.type === 'image/png';
const isLt2M = file.size / 1024 < 65;
if (!isPNG) {
this.$message.error('上传头像图片只能是 PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 65K!');
}
return isPNG && isLt2M;
},