ionic4+angular+cordova 利用cordova-plugin-image-picker插件上传图片

xxx.html.ts代码

 <img [src]="user.userimg" alt="" (click)="getPicturesFromPhoto()">

xxx.page.ts代码

import { Component, OnInit } from '@angular/core';
import axios from 'axios'
import { ImagePicker } from '@ionic-native/image-picker/ngx';

@Component({
  selector: 'app-me',
  templateUrl: './me.page.html',
  styleUrls: ['./me.page.scss'],
})
export class MePage implements OnInit {

  public blob:any
  public file:any


  constructor(private imagePicker: ImagePicker) {

  getPicturesFromPhoto() {
    let options = {
      maximumImagesCount: 1,
      width: 200,
      height: 200,
      quality: 100,
      outputType: 1,       //设置为0是文件路径,1是base64,关于如何把base64转化为文件,请看下面的链接
    }
    this.imagePicker.getPictures(options).then((results) => {

      for (let res of results) {
        this.blob = this.dataURLtoBlob("data:image/jpeg;base64," + res) //这里一定要加上data:image/jpeg;base64,
        this.file = this.blobToFile(this.blob, 'a.png') //这里一定要加上文件的名字,看你自己的后台设置
        let param = new FormData()  //以表单的形式上传,这里一定要这样才能传过去
        param.append('file', this.file,this.file.name)
        alert(param)
        this.sendChangeImg(param)  
      }
    }, (err) => {
    });
  }

  sendChangeImg(param) {
    let config = {
      headers: {
        'Content-Type': 'multipart/form-data',  //这里一定要设置
        token: window.localStorage.getItem('token')
      }
    }
    axios.post('http://www.chenweisheng.com/FCS/user/changePortrait', param, config)
      .then(res => {
        alert('返回信息' + res.data.data.info)
      }).catch(error => {

      })
  }
 //将base64转换为blob
  dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });

  }
//将blob转换为file
  blobToFile(theBlob, fileName) {
    theBlob.lastModifiedDate = new Date();
    theBlob.name = fileName;
    return theBlob;
  }


  ngOnInit() {
  }

}

参考文章:base64转文件https://blog.csdn.net/baidu_41921865/article/details/90665084

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值