ionic中实现从相册中选择图片并一次上传多张图片

最新推荐文章于 2022-07-28 13:45:36 发布

嘉恩Gavin

最新推荐文章于 2022-07-28 13:45:36 发布

阅读量1.9k

点赞数

分类专栏： ionic 文章标签： cordova 插件

本文链接：https://blog.csdn.net/Jiaen188/article/details/78170096

版权

在 Ionic 应用中，为了实现从相册选择并一次性上传多张图片，需要克服 cordova 插件 file-transfer 的限制。通过组合使用 cordovaImagePicker 和 cordovaCamera 获取图片URI，将它们转化为Blob并追加到FormData中。关键在于确保所有图片处理完成后再进行上传，同时在 Angular 中设置请求头以创建符合要求的 Multipart/form-data 请求。

摘要由CSDN通过智能技术生成

在开发项目的时候需要在一次请求中能够上传多张图片，本以为使用cordova的相关插件file-transer就能轻松搞定。但是真的想的太简单了，cordova plugin的file-transer一次只能上传一个文件，如果想要用循环的方式，就会再后台产生多条记录显然不是我们需要的。最后翻了很多博客后加上自己调试终于实现。

<div class="item row row-wrap">
        <div ng-repeat="item in files" class="col col-25">
          <div class="pos-relative level-center w60 h60">
            <img ng-src="{
   {item}}">
            <i ng-click="deleteFile(item)" class="icon ion-close-circled pos-absolute deleteFile"></i>
          </div>
        </div>

        <div ng-if="files.length < 6" ng-click="showActionSheet()" class="col col-25">
          <div class="text-align-center level-center pt5 w60 h60" style="border: 1px solid #b3b3b3;">
            <i class="icon ion-plus-round font30"></i>
            <p ng-bind="i18n.upload_accessory_btn" class="text-align-center font12"></p>
          </div>
        </div>

      </div>

function dealFiles(imageAry) {
      $ionicLoading.show();
      const deferred = $q.defer(),
        promise = _.map(imageAry, (item, key) => {
          const def = $q.defer();  // 这里再次使用$q.defer为了确保所有图片已经转化完毕
          window.resolveLocalFileSystemURL(item, fileEntry => {
            file