Verwenden Sie Ajax, um Bilder im Base64-Format während der H5-Entwicklung hochzuladen

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen für die Verwendung von Ajax zum Hochladen von Bildern im Base64-Format bei der Entwicklung von H5 vorstellen.

Schauen wir uns ohne weiteres den Code an

1. Komponenten hochladen

 <p class="imgbox">
   <img class="goodsimg" src="../../assets/addimg.png">
   <input id="file" type="file" class="fileupload" accept="image/*" multiple capture="camera" @change="viewimg()"/>
 </p>

2

viewimg($event) {
   //获取当前的input标签
   var currentObj = event.currentTarget; 
   //找到要预览的图片img标签，亦可动态生成
   var img = currentObj.parentNode.children[0]; 
   setImagePreview(currentObj, img);
   function setImagePreview(docObj, imgObjPreview) {
     if (docObj.files && docObj.files[0]) {
        imgObjPreview.style.display = 'block';
        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
    }
  }
}

3. Besorgen Sie sich das Bild und laden Sie es auf den Server hoch

//单张图片上传
var inputs = $("input.fileupload");
for (var i = 0; i < inputs.length; i++) {
  //图片转base64上传
  var file = inputs[i].files;
  if (file[0]) {
    var reader = new FileReader();
    reader.readAsDataURL(file[0]);
    reader.onload = function(e) {
   var event = this;
   console.log(event.result);
      $.ajax({
        type: 'POST',
        url: 'http://10.145.0.05/goods/addGoodsBase64',
        dataType: "json",
        data: {
          "base64": event.result,
        },
        success: function(data) {
          console.log(data);
        }
      });
    }
  }
}

Okay, das war's, der Rest wird von den Back-End-Studenten erledigt.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So konfigurieren Sie Google Chrome für die Unterstützung von AJAX-Anfragen des Dateiprotokolls

AJAX ohne Aktualisierungsprüfung der eingegebene Benutzername

Das obige ist der detaillierte Inhalt vonVerwenden Sie Ajax, um Bilder im Base64-Format während der H5-Entwicklung hochzuladen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!