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 // ::
* @version V1.0.0
!-->
<template>
<div>
<Drawer title="上传照片"
class="uploadPhotoDrawerClass"
v-model="drawerVmodel"
width=""
: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=""
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=""
:mask-closable="false"
title="上传图片">
<div class='divFormClass'> </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, )) { warningStr += '文件大小超过5M,请检查后重新上传!' }
if (warningStr.length !== ) {
this.$Message.warning({
content: warningStr,
duration: ,
closable: true
})
}
if (warningStr.length === ) {
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 * *
if (size > maxSizeByte) {
return true
} else {
return false
}
},
checkFormat (fileName, format) {
let index = fileName.lastIndexOf('.')
let suffix = fileName.substr(index + )
// 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: !important;
}
// .uploadPhoto {
// .divFormClass {
// height: calc(~"100vh - 350px");
// overflow-y: auto;
// padding-right: 15px;
// }
// }
.uploadPhotoDrawerClass {
.ivu-drawer-mask {
z-index: !important;
}
.ivu-drawer-wrap {
z-index: !important;
} .demo-drawer-footer {
width: %;
position: absolute;
bottom: ;
left: ;
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>
iview upload 上传图片 不传服务器 转 base64的更多相关文章
- kindeditor修改图片上传路径-使用webapi上传图片到图片服务器
kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 在这里我着重介绍一些使用kindeditor修改图片上传路径并通过webapi上传图片到图片服务器的方案. 因为我使用的 ...
- kindeditor扩展粘贴图片功能&修改图片上传路径并通过webapi上传图片到图片服务器
前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...
- kindeditor扩展粘贴截图功能&修改图片上传路径并通过webapi上传图片到图片服务器
前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...
- iview Upload组件多个文件上传
使用 iview Upload 上传组件 手动上传 包括单个文件和多个文件 思路:创建一个数组 把需要上传的文件 push到这个数组里面 1.引用组件 2.手动上传,根据官方文档 设置:before ...
- iview upload on-format-error 事件 在 before-upload 事件 之后,导致在before里面阻止上传后,监测事件失效,需要自己手工写
iview upload on-format-error 事件 在 before-upload 事件 之后,导致在before里面阻止上传后,监测事件失效,需要自己手工写
- php工作笔记1-数组常用方法总结,二维数组的去重,上传图片到oss服务器
1.二维数组去重,生成二维数组 private function array_unique_fb($array2D){ $data = array(); foreach($array2D as $k ...
- IOS 视频.图片上传服务器
//上传视频 AFHTTPSessionManager *manager = [AFHTTPSessionManager manager]; manager.requestSerializer. ...
- html+php上传图片文件到服务器
html+php上传图片文件到服务器 一.html代码 <body> <form action="" method="post" enctyp ...
- 导出HTML5 Canvas图片并上传服务器功能
这篇文章主要介绍了导出HTML5 Canvas图片并上传服务器功能,文中通过实例代码给大家介绍了HTML5 Canvas转化成图片后上传服务器,代码简单易懂非常不错,具有一定的参考借鉴价值,需要的朋友 ...
随机推荐
- oracle报ORA-00911:invalid character
转自:http://www.cnblogs.com/chuang-sharing/p/9493316.html 今天查问题的时候,发现一个在分号后边加注释,解析错误的问题: select decode ...
- #define WM_COMM_BREAK_DETECTED WM_USER+1
一.#define WM_COMM_BREAK_DETECTED WM_USER+1定义一个用户自定义消息WM_COMM_BREAK_DETECTED,它是自定义消息,非系统消息 为了防止用户定义的消 ...
- django上课笔记3-ORM补充-CSRF (跨站请求伪造)
一.ORM补充 ORM操作三大难点: 正向操作反向操作连表 其它基本操作(包含F Q extra) 性能相关的操作 class UserInfo(models.Model): uid = models ...
- [转]C# Socket编程笔记
本文转自:http://www.cnblogs.com/stg609/archive/2008/11/15/1333889.html 原文如下: 看到这个题目,是不是很眼熟?在博客园里搜下,保证会发现 ...
- 20170412-sl
force n实力,武力 v强迫 ---------------20170413-sl----------------------- discard n/v 放弃 fetch n/v 拿,取 pu ...
- 百度之星资格赛 1003 度度熊与邪恶大魔王(二维dp)
分析 挺好的一道题 dp[i][j]表示打败i颗血j防御力的怪兽需要的最少宝石数 然后就好了,复杂度\(O(n+m*1000*10)\) #include <bits/stdc++.h> ...
- 安装 statconn 使R与c#交互
很久以前完成过,但是最近重新折腾发现全忘了,所以记下来. 1.安装 R 2.安装 R studio 3.去 http://rcom.univie.ac.at/download.html 下载 stat ...
- CF1045G AI robots(动态开点线段树)
题意 火星上有$N$个机器人排成一行,第$i$个机器人的位置为$x_{i}$,视野为$r_{i}$,智商为$q_{i}$.我们认为第$i$个机器人可以看到的位置是$[x_{i}-r_{i},x_{i} ...
- SUSAN角点检测
close all; clear all; I=imread('corner2.gif'); [posX,posY]=susan(I,); figure; imshow(I);hold on; plo ...
- Solr打分排序规则自定义【转】
在搭建好solrCloud搜索集群后,通过编写基本的查询显示语句已经能够通过输入关键字查询到相应结果进行显示,但是在显示结果排序上以及不相关信息过滤问题上,如何制定合理的打分规则得到理想的结果集确实比 ...