JS 開発 WeChat パブリック アカウントが写真をローカル サーバーにアップロードする

WeChat パブリック アカウントの開発には、一般的に、ローカル写真を選択するか、モバイル パブリック アカウント プログラムで写真を撮り、その写真をローカル バックエンド サーバーにアップロードする機能が含まれます。オンライン メソッドは通常、WeChat が公式に提供するchooseImage メソッドを呼び出します。次に、Android か iOS か、WKWebview カーネルを使用するかを決定し、最後に戻り値を個別に処理して Base64 でエンコードされたデータに変換し、サーバーにアップロードします。

この方法の難点は、システムを判断して WeChat から返されたデータを Base64 エンコードし、その後サーバー側で Base64 デコード ロジックを記述する必要があることです。この記事では一般的なアプローチを使用せず、それを にアップロードします。まず WeChat サーバー。次にバックグラウンド サーバーが WeChat サーバーからファイルをダウンロードし、ファイル サーバーに保存します。具体的なコードは次のとおりです:

1. ページ

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

ページには通常のアップロードボタンのみがあります

2. JSロジック

$('#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');
		}
	});
}

最初にwx.chooseImageメソッドを呼び出して画像を選択します。次に、結果を呼び出して画像メソッド wx.uploadImage をアップロードし、アップロードが成功したときの戻り値である mediaId を取得します。次に、独自に作成したサーバー側コントローラー メソッドを呼び出して、ajax 経由で mediaId を送信し、次にサーバー側コードを送信します。

3. サーバー側の処理ロジック

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

主に BufferedInputStream オブジェクトの fileStream を処理する、Attachment オブジェクトを取得します ファイル ストリームを保存する方法は数多くあります。ローカルでは、Apache が提供する FileUtils クラスを使用して処理できます。ここでは、インターネット上に同様のコードが多数あります。これまでのところ、WeChat 公式アカウントのローカル サーバーに画像をアップロードすることに成功しています。

関連する推奨事項:

php で画像をローカル サーバー インスタンス共有にダウンロード

PHP を使用して WeChat サーバーからローカル サーバーにファイルをダウンロード

リモート画像をローカル サーバーに保存する php の実装コード_PHP チュートリアル

以上がJS 開発 WeChat パブリック アカウントが写真をローカル サーバーにアップロードするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。