JS 개발 WeChat 공개 계정은 로컬 서버에 사진을 업로드합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JS 개발 WeChat 공개 계정은 로컬 서버에 사진을 업로드합니다.

韦小宝

Mar 14, 2018 pm 06:41 PM

javascript그림현지의

WeChat 공개 계정의 개발에는 일반적으로 모바일 공개 계정 프로그램에서 로컬 사진을 선택하거나 사진을 촬영하여 로컬 백엔드 서버에 업로드하는 기능이 포함됩니다. 온라인 방법은 일반적으로 WeChat에서 공식적으로 제공하는 chooseImage 메소드를 호출하는 것입니다. 그런 다음 android인지 ios인지, WKWebview 커널을 사용할지 여부를 판단하고, 최종적으로 반환값을 별도로 처리하여 base64로 인코딩된 데이터로 변환한 후 서버에 업로드합니다.

이 방법의 어려운 점은 시스템을 판단하고 WeChat에서 반환된 데이터를 base64로 인코딩한 다음 서버 측에서 base64 디코딩 로직을 작성해야 한다는 것입니다. 이 기사에서는 일반적인 접근 방식을 사용하지 않고 에 업로드합니다. 먼저 WeChat 서버. 그런 다음 백그라운드 서버가 WeChat 서버에서 다운로드하여 파일 서버에 저장합니다. 구체적인 코드는 다음과 같습니다.

1. 페이지

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

페이지에는 일반 버튼 업로드 버튼만 있습니다

2. JS logic

$(&#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을 처리하는 downloadMedia 메소드를 호출한 후 Attachment 객체를 가져옵니다. 이 속성은 파일 스트림을 저장하는 방법이 많이 있습니다. Apache에서 제공하는 FileUtils 클래스를 사용하여 처리할 수 있습니다. 여기에는 특정 코드가 제공되지 않습니다. 인터넷에는 유사한 코드가 많이 있습니다. 지금까지 WeChat 공식 계정의 로컬 서버에 이미지를 성공적으로 업로드했습니다.

관련 기사