ionic 文件上传 ionic4.x

最近在做ionic4的app项目,遇到上传图片和拍照已经处理,上传本地文件还碰到了一些小问题。首先引入

 // File Transfer
ionic cordova plugin add cordova-plugin-file-transfer
npm install --save @ionic-native/file-transfer  
 // File Path
ionic cordova plugin add cordova-plugin-filepath
npm install @ionic-native/file-pathz
 // File Chooser
ionic cordova plugin add cordova-plugin-filechooser
npm install @ionic-native/file-chooser

在app.module.ts引用
image.png
在组件内引用

// 请注意此处FileTransfer要从ngx/index中引入,3版本不用,4版本不这样会报错。
import { FileTransfer, FileTransferObject, FileUploadOptions } from '@ionic-native/file-transfer/ngx/index';
import { FileChooser } from '@ionic-native/file-chooser/ngx';
import { FilePath } from '@ionic-native/file-path/ngx';

  constructor(
    private filePath: FilePath,
    private transfer: FileTransfer,
    private fileChooser: FileChooser,
  ) { }

然后就是代码实现:

  upload() {
// 调用fileChooser打开本地文件管理器选择文件
    this.fileChooser.open().then(url => {
// 拿到url使用resolveUri方法转为path
      this.resolveUri(url).then(path => {
// 处理之后上传
        this.uploadFileByPath(url)
        // 这个uploadFileByPath方法就是上传至后台服务器的方法
      })
    }).catch(e => {
      console.log('失败');
    })
  }
 // 该方法用处在于转换选择文件格式为路径
  resolveUri(uri: string): Promise<any> {
    return new Promise((resolve, reject) => {
 // 调用filePath
      this.filePath.resolveNativePath(uri).then(filePath => {
        resolve(filePath);
      }).catch(err => {
        reject(err);
      });
    })
  }
  uploadFileByPath(filepath) {
    this.showLoading()
    const fileTransfer: FileTransferObject = this.transfer.create();
    // 该配置项options详情见 https://github.com/apache/cordova-plugin-file-transfer
    let options: FileUploadOptions = {
      fileKey: 'file',
      fileName: filepath.substring(filepath.lastIndexOf(".") + 1, filepath.length),  // 文件类型 截取filepath后缀的JavaScript方法
      headers: {},
    }

    fileTransfer.upload(filepath, '/user/fileUpload', options)
      .then((data: any) => {
        console.log(data+'这里就可以做回显或者其他操作了');
        // success
      }, (err) => {
        // error
       console.log('失败');
      })

  }

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值