Implementierung der Vorschaufunktion zum Hochladen komprimierter Bilder auf der mobilen Seite von Vue.js 2.0-js-Tutorial-php.cn

In diesem Artikel wird hauptsächlich die Vorschaufunktion für das Hochladen von Bildern mit der mobilen Kamera von Vue.js 2.0 vorgestellt, die sehr gut ist und einen Referenzwert hat. Freunde in Not können sich darauf beziehen

, wenn sie Vue.js 2.0 lernen und verwenden Während des Prozesses sind wir auf viele Unterschiede gestoßen. Wir haben ursprünglich H5-Anwendungen auf dem mobilen Endgerät entwickelt und geplant, das Mui-Framework mit dem Vue.js+vue-router+vuex-Familien-Bucket zu kombinieren. Bei der Implementierung des Foto-Uploads sind wir jedoch auf Probleme gestoßen. Das Problem des Aufrufs der H5+-Schnittstelle von plus wurde gelöst, indem am Ende die Eingabedateimethode für die Foto-Upload-Funktion verwendet wurde. Aufgrund des Fortschritts des Projekts und der Iteration der Versionen muss ich jedoch aufgeben. In Zukunft werde ich möglicherweise die H5+-Schnittstelle verwenden, um diese Funktion zu implementieren.

Lassen Sie mich zunächst über meine Idee sprechen, diese Fotovorschau, -komprimierung und -hochladung zu implementieren. Genauer gesagt sollte es sich um den Prozess der Vorschau und des Hochladens nach der Aufnahme eines Fotos oder der Bildauswahl handeln Kompression. Machen Sie jedes Mal ein Foto oder wählen Sie ein Bild aus – komprimieren Sie dann das Bild – zeigen Sie es in der Vorschau an und laden Sie es hoch. Das hochgeladene Bildkomprimierungs-Plugin ist localResizeIMG. Die Anweisungen zur Verwendung dieses Plug-Ins finden Sie im Wiki. Das Grundprinzip besteht darin, das Bild über Canvas zu rendern und es dann über die toDataURL-Methode zu komprimieren und in einem Base64-String zu speichern (Der Komprimierungseffekt ist sehr gut, wenn Sie unter iOS ein 2-MB-Foto aufnehmen und es komprimieren. Die Verzerrung ist nicht zu schwerwiegend, aber für mein Projekt , das Bild ist deutlich sichtbar. In dem von mir geposteten Code wird auch seine Verwendung demonstriert.

<template>
 <h5 class="content-header">图片列表</h5>
 <p class="image-list">
 <p class="list-default-img" v-show="isPhoto" @click.stop="addPic">
 <img src="./images/icon_photo.png" />
 <span>请选择或者拍照上传照片</span>
 <input type="file" accept="image/jpeg,image/jpg,image/png" capture="camera" @change="onFileChange" style="display: none;">
 </p>
 <ul class="list-ul" v-show="!isPhoto">
 <li class="list-li" v-for="(iu, index) in imgUrls">
 <a class="list-link" @click=&#39;previewImage(iu)&#39;>
  <img :src="iu">
 </a>
 <span class="list-img-close" @click=&#39;delImage(index)&#39;></span>
 </li>
 <li class="list-li-add">
 <span class="add-img" @click.stop="addPic"></span>
 </li>
 </ul>
 </p>
 <p class="add-preview" v-show="isPreview" @click="closePreview">
 <img :src="previewImg">
 </p>
 
</template>
<script>
 export default {
 data: function () {
 return {
 imgUrls: [],
 urlArr: [],
 isPhoto: true,
 btnTitle: &#39;&#39;,
 isModify: false,
 previewImg:&#39;&#39;,
 isPreview: false
 }
 },
 watch: {
 imgUrls: &#39;toggleAddPic&#39;
 },
 methods: {
 toggleAddPic: function() {
 let vm = this;
 if(vm.imgUrls.length >= 1) {
  vm.isPhoto = false;
 } else {
  vm.isPhoto = true;
 }
 },
 addPic: function(e) {
 let vm = this;
 $(&#39;input[type=file]&#39;).trigger(&#39;click&#39;);
 return false;
 },
 onFileChange: function(e) {
 var files = e.target.files || e.dataTransfer.files;
 if(!files.length) return;
 this.createImage(files, e);
 },
 createImage: function(file, e) {
 let vm = this;
 lrz(file[0], { width: 480 }).then(function(rst) {
  vm.imgUrls.push(rst.base64);
  return rst;
 }).always(function() {
 // 清空文件上传控件的值
 e.target.value = null;
 });
 },
 delImage: function(index) {
 let vm = this;
 let btnArray = [&#39;取消&#39;, &#39;确定&#39;];
 mui.confirm(&#39;确定删除该图片?&#39;,&#39;提示&#39;, btnArray, function(e) {
  if (e.index == 1) {
  vm.imgUrls.splice(index, 1);
  }
 })
 },
 previewImage: function(url){
 let vm = this;
 vm.isPreview = true;
 vm.previewImg = url;
 },
 closePreview: function(){
 let vm = this;
 vm.isPreview = false;
 vm.previewImg = "";
 },
 saveImage: function(){
 let vm = this;
 let urlArr = [],
 imgUrls = this.imgUrls;
 for(let i = 0; i < imgUrls.length; i++) {
  if(imgUrls[i].indexOf(&#39;file&#39;) == -1) {
  urlArr.push(imgUrls[i].split(&#39;,&#39;)[1]);
  } else {
  urlArr.push(imgUrls[i]);
  }
 }
 //数据传输操作
 }
 }
 }
 
</script>

Nach dem Login kopieren

1. Klicken Sie, um ein Foto aufzunehmen oder ein Bild auszuwählen addPic

Das Aufnehmen von Fotos und das Auswählen von Bildern in vue.js sind häufige Vorgänge. Sie können nur ein Foto aufnehmen oder wählen Sie jeweils eins aus. Sie können mehrere Bilder aufnehmen und diese mit dem Modifikator .stop hochladen. Rufen Sie event.stopPropagation() auf. „Akzeptieren“ ist die Angabe des Dateityps, der vom System in der WebApp erfasst wird.

Binden Sie das Änderungsereignis onFileChange, um das Dateiobjekt abzurufen, wenn die Fotoaufnahmeaktion ausgelöst wird. Rufen Sie dann die lrz-Methode auf, um das Bild zu komprimieren, und fügen Sie das Bild basierend auf base64 hinzu formatieren Sie es in das imgUrls-Array.

lrz(file[0], { width: 480 }).then(function(rst) {
  vm.imgUrls.push(rst.base64);
  return rst;
 }).always(function() {
 // 清空文件上传控件的值
 e.target.value = null;
 });
lrz(file, [options]);

Nach dem Login kopieren

Datei: Die über input:file erhaltene Datei oder direkt im Bildpfad übergeben.

[Optionen]: Dieser Parameter kann ignoriert werden.

width {Number} Die maximale Breite des Bildes, die standardmäßig auf die Breite des Originalbilds eingestellt ist. Wenn die Höhe nicht festgelegt ist, wird sie an die Breite
height {Number} angepasst oben;
qualität {Number} Bildkomprimierungsqualität, Wert 0 - 1, Standard ist 0,7;
fieldName {String} vom Backend empfangener Feldname, Standard: file; ein Promise-Objekt, einschließlich then(), Catch(), immer drei Methoden.

then(rst):

rst.formData Daten, die vom Backend verarbeitet werden können;

rst.file komprimiertes Dateiobjekt (bereits in rst verloren). (Standard) .formData hat eine Kopie. Es ist zu beachten, dass dies das Originaldateiobjekt ist.

rst.fileLen ist die Größe des generierten Bildes um zu überprüfen, ob es übertragen werden soll.
rst.base64 Das generierte Bild base64 kann vom Backend in ein Bild umgewandelt werden, und es kann auch direkt für
rst.base64Len verwendet werden Die Größe des generierten Base64 kann vom Backend verwendet werden. Verwenden Sie diesen Wert, um zu überprüfen, ob die Übertragung abgeschlossen ist (wenn die Base64-Upload-Methode verwendet wird).
rst.origin ist das Originaldateiobjekt, das einige Originaldateiinformationen speichert, z als Größe, Datum usw.;

catch(err), Always().

Hinweis: Da wir möglicherweise weiterhin klicken, um Fotos aufzunehmen und Bilder hochzuladen, muss der Wert des Upload-Steuerelements in der Always-Callback-Funktion gelöscht werden.

// 清空文件上传控件的值
 e.target.value = null;

Nach dem Login kopieren

2. Klicken Sie, um das erste Foto aufzunehmen und die Vorschau und die DOM-Anzeige für die weitere Aufnahme von Fotos anzuzeigen

isPhoto

Die Standardeinstellung ist „true“, DOM ausblenden Anzeige der weiteren Aufnahme von Fotos, toggleAddPic Überwachen Sie die Länge des aktuell ausgewählten imgUrls-Arrays und konvertieren Sie den booleschen Wert von isPhoto. Wenn ein oder mehrere Bilder vorhanden sind und isPhoto auf false gesetzt ist, wird das DOM, auf das geklickt wird, um das erste Bild aufzunehmen, ausgeblendet , und der DOM, der weiterhin Bilder aufnimmt, wird angezeigt; wenn kein Bild vorhanden ist, wird der DOM, der weiterhin Bilder aufnimmt, ausgeblendet und der DOM des ersten aufgenommenen Fotos angezeigt.

3. Löschen Sie das ausgewählte komprimierte Bild

delImage

Löschen Sie entsprechend dem dem Array entsprechenden Index die entsprechenden Bilddaten in imgUrls.

delImage: function(index) {
 let vm = this;
 let btnArray = [&#39;取消&#39;, &#39;确定&#39;];
 mui.confirm(&#39;确定删除该图片?&#39;,&#39;提示&#39;, btnArray, function(e) {
  if (e.index == 1) {
  vm.imgUrls.splice(index, 1);
  }
 })
 }

Nach dem Login kopieren

Große Bildvorschau komprimierter Bilder und große Bildvorschau schließen

isPreview-VorschauBild schließenVorschau

在这里大图预览就是将base64格式的图片直接放进预览DOM的img src中放大展示，点击图片自身关闭预览，清空img src资源。

5. 对base64图片传输前的处理 saveImage

saveImage: function(){
 let vm = this;
 let urlArr = [],
 imgUrls = this.imgUrls;
 for(let i = 0; i < imgUrls.length; i++) {
  if(imgUrls[i].indexOf(&#39;file&#39;) == -1) {
  urlArr.push(imgUrls[i].split(&#39;,&#39;)[1]);
  } else {
  urlArr.push(imgUrls[i]);
  }
 }
 //数据传输操作
 }

Nach dem Login kopieren

我压缩成base64字符串是“data:image/jpeg;base64,~~”的字符串，为了后端好处理，我这里为了将编辑时候后台返回的图片url区别开来，将“data:image/jpeg;base64,"截取掉，只传递给后端逗号后面的base64字符串。

注意：后端接收到我传递的base64字符串数组的时候，发现字符经如果被urlencode后标准的base64中的/、 +会被转成%xx，后端在将base64字符串处理成图片时，需要将特殊字符过滤掉。

  public ActionResult MUploadImgBase64Str(string base64str)
  {
   try
   {
    var imgData = base64str;
    //过滤特殊字符即可 
    string dummyData = imgData.Trim().Replace("%", "").Replace(",", "").Replace(" ", "+");
    if (dummyData.Length % 4 > 0)
    {
     dummyData = dummyData.PadRight(dummyData.Length + 4 - dummyData.Length % 4, &#39;=&#39;);
    }
    byte[] byteArray = Convert.FromBase64String(dummyData);
    using (System.IO.MemoryStream ms = new System.IO.MemoryStream(byteArray))
    {
     var img = System.Drawing.Image.FromStream(ms);
     var path = "~/Content/UploadFiles/mobile/";
     var uploadpath = Server.MapPath(path);
     if (!Directory.Exists(uploadpath))
     {
      Directory.CreateDirectory(uploadpath);
     }
     var saveName = uploadpath + “stoneniqiu” + ".jpg";
     img.Save(saveName);
     return Json(saveName);
    }
   }
   catch (Exception e)
   {
    return Json(e.Message);
   }
  }

Nach dem Login kopieren

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！