Le compte public WeChat de développement JS télécharge des images sur le serveur local

Le développement des comptes publics WeChat implique généralement la fonction de sélection de photos locales ou de prise de photos dans le programme de compte public mobile, et de téléchargement des photos sur le serveur backend local. La méthode en ligne consiste généralement à appeler la méthode ChooseImage officiellement fournie par. WeChat, puis déterminez si Android ou iOS utilise le noyau WKWebview, la valeur de retour est traitée séparément et convertie en données codées en base64, puis téléchargée sur le serveur.

La difficulté de cette méthode est qu'elle doit juger le système et encoder en base64 les données renvoyées par WeChat, puis écrire la logique de décodage en base64 côté serveur. Cet article n'utilise pas l'approche courante, mais. le télécharge d'abord sur le serveur WeChat, puis sur le serveur backend pour le télécharger depuis le serveur WeChat et l'enregistrer sur le serveur de fichiers. Le code spécifique est le suivant :

1. La page

<input type="button" id="uploadBtn">

n'a qu'un bouton de téléchargement avec un bouton ordinaire sur la page

2. logique

$('#uploadBtn').click(function () {
	wx.chooseImage({
		count: 1,
		sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
		sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
		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) {
					$('#imgUrl').val(data);
					$.toast('上传成功', 'text');
				},
				error: function (XMLHttpRequest, textStatus, errorThrown) {
					$.toast('上传错误,请稍候重试!', 'text');
				}
			});
		},
		fail: function (error) {
			$.toast('上传错误,请稍候重试!', 'text');
		}
	});
}

Appelez d'abord la méthode wx.chooseImage pour sélectionner l'image, puis utilisez le résultat pour appeler la méthode de téléchargement d'image wx.uploadImage. La valeur de retour d'un téléchargement réussi est le mediaId, puis appelez. la méthode du contrôleur côté serveur que nous avons écrite pour transmettre le mediaId est soumise, et l'étape suivante est le code côté serveur.

3. Logique de traitement côté serveur

/**
     * 获取临时素材
     *
     * @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方法
}

Obtenez l'objet Attachment après avoir appelé la méthode downloadMedia, qui traite principalement le fileStream de l'objet BufferedInputStream. flux de fichiers. Il existe de nombreuses façons de sauvegarder les flux de fichiers localement. Vous pouvez utiliser la classe FileUtils fournie par Apache. Le code spécifique n'est pas fourni ici. Jusqu'à présent, nous avons téléchargé avec succès des images sur le serveur local du compte officiel WeChat.

Recommandations associées :

PHP télécharge des images sur le partage d'instance de serveur local

Utilisez PHP depuis Téléchargez des fichiers du serveur WeChat vers le serveur local

Code d'implémentation php pour enregistrer des images distantes sur le serveur local,_Tutoriel PHP

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!