Heim > Web-Frontend > js-Tutorial > Hauptteil

Das öffentliche WeChat-Konto der JS-Entwicklung lädt Bilder auf den lokalen Server hoch

韦小宝
Freigeben: 2018-03-14 18:41:44
Original
4671 Leute haben es durchsucht

Die Entwicklung öffentlicher WeChat-Konten umfasst im Allgemeinen die Funktion, lokale Bilder auszuwählen oder Bilder im mobilen öffentlichen Kontoprogramm aufzunehmen und die Bilder auf den lokalen Backend-Server hochzuladen. Die Online-Methode besteht im Allgemeinen darin, die von offiziell bereitgestellte Methode „selectImage“ aufzurufen WeChat und dann feststellen, ob Android oder iOS den WKWebview-Kernel verwenden. Der Rückgabewert wird separat verarbeitet, in Base64-codierte Daten konvertiert und dann auf den Server hochgeladen.

Die Schwierigkeit dieser Methode besteht darin, dass sie das System beurteilen und die von WeChat zurückgegebenen Daten mit Base64 kodieren und dann die Base64-Dekodierungslogik auf der Serverseite schreiben muss lädt es zuerst auf den WeChat-Server und dann auf den Backend-Server hoch, um es vom WeChat-Server herunterzuladen und auf dem Dateiserver zu speichern. Der spezifische Code lautet wie folgt:

1. Die Seite

<input type="button" id="uploadBtn">
Nach dem Login kopieren

hat nur eine Upload-Schaltfläche mit einer normalen Schaltfläche auf der Seite

2 Logik

$(&#39;#uploadBtn&#39;).click(function () {
	wx.chooseImage({
		count: 1,
		sizeType: [&#39;original&#39;, &#39;compressed&#39;], // 可以指定是原图还是压缩图,默认二者都有
		sourceType: [&#39;album&#39;, &#39;camera&#39;], // 可以指定来源是相册还是相机,默认二者都有
		success: function (res) {
			var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
			that.uploadImg(localIds[0]);
		}
	});
});

//具体上传图片
uploadImg: function (e) {
	wx.uploadImage({
		localId: e, // 需要上传的图片的本地ID,由chooseImage接口获得
		isShowProgressTips: 1, // 默认为1,显示进度提示
		success: function (res) {
			serverId = res.serverId;
			$.ajax({
				url: "/uploadImg",
				dataType: "json",
				async: false,
				contentType: "application/x-www-form-urlencoded; charset=UTF-8",
				data: {"mediaId": serverId},
				type: "POST",
				timeout: 30000,
				success: function (data, textStatus) {
					$(&#39;#imgUrl&#39;).val(data);
					$.toast(&#39;上传成功&#39;, &#39;text&#39;);
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					$.toast(&#39;上传错误,请稍候重试!&#39;, &#39;text&#39;);
				}
			});
		},
		fail: function (error) {
			$.toast(&#39;上传错误,请稍候重试!&#39;, &#39;text&#39;);
		}
	});
}
Nach dem Login kopieren

Rufen Sie zuerst die Methode wx.chooseImage auf, um das Bild auszuwählen, und verwenden Sie dann das Ergebnis, um die Methode zum Hochladen von Bildern aufzurufen Die serverseitige Controller-Methode, die wir geschrieben haben, um die mediaId Ajax zu übergeben, wird übermittelt, und der nächste Schritt ist der serverseitige Code.

3. Serverseitige Verarbeitungslogik

/**
     * 获取临时素材
     *
     * @param mediaId 媒体文件ID
     * @return 正确返回附件对象,否则返回null
     * @throws WeixinException
     */
    public Attachment downloadMedia(String mediaId) throws WeixinException {
        //下载资源
        String url = "https://api.weixin.qq.com/cgi-bin/media/get?access_token=" + this.oauthToken.getAccess_token() + "&media_id=" + mediaId;
        //创建请求对象
        HttpsClient http = new HttpsClient();
        return http.downloadHttps(url);
    }
    
其中Attachment表示下载文件返回值对象,包含的属性有:
public class Attachment {

    private String fileName;
    private String fullName;
    private String suffix;
    private String contentLength;
    private String contentType;
    private BufferedInputStream fileStream;
    private String error;
    
    省略get/set方法
}
Nach dem Login kopieren

Rufen Sie das Attachment-Objekt nach dem Aufruf der downloadMedia-Methode ab, die hauptsächlich den FileStream des BufferedInputStream-Objekts verarbeitet Dateistreams Es gibt viele Möglichkeiten, Dateistreams lokal zu speichern. Der spezifische Code wird hier nicht bereitgestellt. Bisher haben wir erfolgreich Bilder auf den lokalen Server des offiziellen WeChat-Kontos hochgeladen.

Verwandte Empfehlungen:

PHP lädt Bilder auf lokale Serverinstanzfreigabe herunter

Verwenden Sie PHP von Laden Sie Dateien vom WeChat-Server auf den lokalen Server herunter

PHP-Implementierungscode zum Speichern von Remote-Bildern auf dem lokalen Server,_PHP-Tutorial

Das obige ist der detaillierte Inhalt vonDas öffentliche WeChat-Konto der JS-Entwicklung lädt Bilder auf den lokalen Server hoch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!