Beispielcode-Freigabe für den ionischen Multi-Image-Upload

In diesem Artikel wird hauptsächlich der Beispielcode für ionic zum Auswählen mehrerer Bilder zum Hochladen vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

In diesem Abschnitt werde ich Ihnen zeigen, wie Sie das ImagePicker-Plug-in von Corodva verwenden, um mehrere Bilder auszuwählen und hochzuladen. Kommen wir ohne weitere Umschweife zum Thema.

Plug-in-Installation

cordova plugin add corodva-plugin-imagepicker
cordova plugin add cordova-plugin-file-transfer

Definition des Bildauswahldienstes

angular.module('starter.services', [])
//配置单张图片选择
.factory('SelectPicture', function(UploadFile, Toast) {
 return {
 /**
  * 从图库选择多张图片
  */
 choosePictures: function() {
  window.imagePicker.getPictures(function(res){
  for(var i = 0; i < res.length; i++){
   UploadFile.uploadFile(res[i], "我的服务器接口地址");//传递自己的服务器接口地址
  }
  }, function(err){
  alert(err);
  }, {
  maximumImagesCount: 10, 
  quality: 80
  });
 }
 }
})

Definitionsdatei-Upload-Service

//文件上传
.factory('UploadFile', function(Toast) {
 return {
 /**
  * 上传文件到服务器
  *
  * @param fileUrl 文件路径
  * @param server 服务器接口
  */
 uploadFile: function(fileUrl, server) {
  document.addEventListener("deviceready", onDeviceReady, false);
  function onDeviceReady() {
  var options = new FileUploadOptions();
  options.fileKey = "BeanYon";//后台获取文件的键值
  options.fileName = fileUrl.substr(fileUrl.lastIndexOf('/') + 1);
  options.mimeType = "image/jpeg";
  options.chunkedMode = false;

  var params = {};//这里可添加自定义参数
  options.params = params;

  var ft = new FileTransfer();
  ft.upload(fileUrl, 
     encodeURI(server), 
     success, 
     err, 
     options);
  }

  function success(r){
   Toast.show("图片已经成功上传");
  }

  function err(error){
   Toast.show("上传头像失败，请确保网络正常后再试");
  }
 }
 }
})

Controller anrufen

angular.module('starter.controllers', [])
.controller('UsedUploadCtrl', function($scope, SelectPicture) {
 /**
 * 选择图片并上传
 */
 $scope.uploadImage = function(){
 SelectPicture.choosePictures($scope);
 }
})

Verwandte Empfehlungen:

So erstellen Sie einen Vorschaueffekt für das Hochladen mehrerer Bilder basierend auf HTML

Beispiel für die Funktion zum Hochladen mehrerer Bilder, die durch das Laravel-Framework + Blob implementiert wird

Implementierung der HTML-Vorschaufunktion zum Hochladen mehrerer Bilder

Das obige ist der detaillierte Inhalt vonBeispielcode-Freigabe für den ionischen Multi-Image-Upload. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!