ホームページ >ウェブフロントエンド >jsチュートリアル >JS 開発 WeChat パブリックアカウントが写真をローカルサーバーにアップロードする

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

韦小宝オリジナル: 2018-03-14 18:41:444787ブラウズ

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

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

1. ページ

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

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

2. JSロジック

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

最初に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 公式アカウントのローカルサーバーに画像をアップロードすることに成功しています。

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

関連記事

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