ionic4 图片选择

谁借莪１个温暖的怀抱￠ 2023-05-30 06:26 8阅读 0赞

使用html自带图片上传功能，并转为base64

<img src="{
       {res}}" class="im2" />
            <input type="file" accept="image/*" class="in1" id="m_feedback_bg" onchange="mpreviewFile(event)" />

.in1{
        opacity: 0;
        height: 100px;
        width: 100px;
        margin-left: 80px;
    }

img标签是图片显示，后面input图片选择控件可见度为0，完全覆盖img标签。

ionViewDidEnter() {
        document.getElementById('m_feedback_bg').onchange = (evt) => {
          this.mpreviewFile(evt);
        }
      }

mpreviewFile(evt) {
        if (evt.target.files.length == 0) {
          this.toast("图片加载失败");
          return;
        }
        if (!evt.target.files[0].size) {
          this.toast('图片选中失败');
          return;
        }
        let type = evt.target.files[0].type.toLowerCase();
        if (type != 'image/png' && type != 'image/jpg' && type != 'image/jpeg') {
          this.toast('请上传文件格式为png/jpg/jpeg的图片');
          return;
        }
        let file = evt.target.files[0];
        let reader = new FileReader();
        reader.readAsDataURL(file);
    
        reader.onload = async (mevt) => {
          const mElement: any = document.getElementById('m_feedback_bg');
          mElement.value = '';
          let file: any = mevt.target;
          this.res=file.result;
        };
      }

1.非要在ionViewDidEnter里再注册一次onchange事件，否则偶尔会报错。

2.最终file.result即为base64格式图片，可直接赋值为img并显示。

3.onload后必须把value赋值为空，否则也会报错。

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关 ionic3升级ionic4写法变化大全

如题，将记录ionic3升级到ionic4写法上的所有变化持续更新，欢迎大家补充无分类，发现一个就写一个迁移时千万不要把所有代码都复制过来再修改错

Dear 丶/ 2023年06月05日 05:50/ 0 赞/ 103 阅读

相关 ionic4 图片选择

使用html自带图片上传功能，并转为base64 <img src="{ {res}}" class="im2" /> <inp

谁借莪１个温暖的怀抱￠/ 2023年05月30日 06:26/ 0 赞/ 9 阅读

相关 ionic4升级到ionic5踩坑记录

ionic3升级到ionic4之后，大半年没升级了，一直用的版本是"@ionic/angular": "4.11.7"。 ionic4这个版本总体感觉还行，比较大的一个问题是

﹏ヽ暗。殇╰゛Y/ 2023年02月14日 02:10/ 0 赞/ 97 阅读

相关 ionic 图片上传Demo

ionic 图片上传Demo 第1步安装插件 1.1安装cordovaCamera 说明：这个插件是用来拍照，或者说是打开手机上面的照相机功能的操作：打

阳光穿透心脏的1/2处/ 2022年08月10日 05:53/ 0 赞/ 286 阅读

相关 Android 4.4从图库选择图片,获取图片路径并裁剪

最近在做一个从图库选择图片或拍照,然后裁剪的功能.本来是没问题的,一直在用 \[java\] [ view plain][view plain] [copy][view

短命女/ 2022年08月07日 15:51/ 0 赞/ 347 阅读

相关【ionic3】地区选择器

1、安装 `ion-multi-picker` npm install ion-multi-picker --save 2、导入 `app.module.ts

朱雀/ 2022年05月29日 05:36/ 0 赞/ 435 阅读

相关移动应用框架 Ionic 4 Ionic for Everyone

[Ionic 于今日发布了 4.0 正式版][Ionic _ 4.0]，代号 Neutronium。官方称 Ionic 4 为“Ionic for Everyo

你的名字/ 2022年03月22日 10:23/ 0 赞/ 345 阅读

相关 ionic4初体验

ionic简介 Ionic是一个开源的移动应用程序开发框架，它可以轻松地使用web技术构建高质量的跨平台的移动应用。可以让我们快速开发移动App、移动端WEB页面、微信公

ゞ浴缸里的玫瑰/ 2022年02月21日 05:47/ 0 赞/ 366 阅读

相关 ionic4常见错误集锦

插件冲突错误 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

﹏ヽ暗。殇╰゛Y/ 2021年12月12日 14:55/ 0 赞/ 360 阅读

相关 ionic4中ionic native的基本使用

ionic官网 [https://ionicframework.com/][https_ionicframework.com] ![在这里插入图片描述][waterm

谁践踏了优雅/ 2021年12月12日 03:05/ 0 赞/ 477 阅读