更新记录
1.0(2020-04-10)
原生H5转base64
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
简介
这是一个利用原生H5的FileReader对象转base64。
因为uniapp没有 input type = 'file' ,所以通过mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行创建input type=file。
然后就可以使用h5原生的FileReader对象转base64了.
主要代码段是:
html中:
<view ref="input" class="input opacity" v-model="file" id="fileUpdate"></view>
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行创建input type=file
mounted() {
var me = this;
var input = document.createElement('input');
input.type = 'file';
input.onchange = event => {
console.log(event);
console.log('wenjian', this.file);
var name = this.file.target.files[0];
var reader = new FileReader();
reader.readAsDataURL(name);
reader.onload = function(e) {
var data = e.target.result;
me.imgbase = data;
console.log('64', data);
me.ChooseImage(data);
};
};
this.$refs.input.$el(input);
},