JS開發微信公眾號上傳圖片到本機伺服器

微信公眾號開發中一般會涉及到在手機公眾號程式中選擇本地圖片或拍照，將圖片上傳到本地後台伺服器的功能，網路上的做法一般是呼叫微信官方提供的chooseImage方法，再判斷是android還是ios且是否使用WKWebview內核，最後再分別處理返回值將之轉為base64編碼的數據，再上傳到伺服器上。

這種方法的困難在於需要判斷系統，並且對微信傳回的資料進行base64編碼，然後在伺服器端還得寫base64解碼的邏輯，本文不使用通用的做法，而是先上傳到微信伺服器，再到後台伺服器端從微信伺服器下載回來儲存到檔案伺服器。具體程式碼如下：

1、頁面

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

頁面上只有一個普通的button的上傳按鈕

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，再呼叫我們自己寫的伺服器端的controller方法將mediaId透過ajax提交過去，接下來就是伺服器端的程式碼。

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方法
}

呼叫downloadMedia方法之後取得Attachment對象，主要就是對BufferedInputStream物件的fileStream來處理，這個屬性就是圖片檔案流，保存文件流到本地就有很多的方法，可以使用apache提供的FileUtils類別來處理，這裡就不提供特定的程式碼了，網路上很多類似的。至此我們就已經成功的實現在微信公眾號上傳圖片到本地伺服器了。

相關推薦：

 php下載圖片到本機伺服器實例分享

##使用PHP從微信伺服器上下載檔案到本機伺服器

php將遠端圖片儲存到本機伺服器的實作程式碼，_PHP教學

以上是JS開發微信公眾號上傳圖片到本機伺服器的詳細內容。更多資訊請關注PHP中文網其他相關文章！