微信js-sdk 上傳圖檔、下載下傳圖檔接口

前提已經在wx.config()中,将圖檔接口驗證通過。

微信js-sdk 中上傳圖檔接口(uploadImage)和下載下傳圖檔接口(downloadImage)都是針對微信伺服器本身的。以官方文檔為準

注：

1.使用chooseImage接口擷取到微信用戶端圖檔位址的與都是 weixin://xxxx

2.上傳圖檔有效期3天，可用微信多媒體接口下載下傳圖檔到自己的伺服器，此處獲得的 serverId 即 media_id，參考文檔 http://mp.weixin.qq.com/wiki/12/58bfcfabbd501c7cd77c19bd9cfa8354.html

3.目前多媒體檔案下載下傳接口的頻率限制為10000次/天，如需要調高頻率，請郵件[email protected],郵件主題為【申請多媒體接口調用量】，請對你的項目進行簡單描述，附上産品體驗連結，并對使用者量和使用量進行說明。

執行個體1、選擇單個圖檔并上傳到微信伺服器

//選擇圖檔單個圖檔
wx.chooseImage({
    count: 1, // 預設9
    sizeType: ['original'], 
    sourceType: ['album', 'camera'], 
    success: function (res) {
        var localId= res.localIds[0]; 
        $('#localId').text(localId);
        //選擇圖檔成功，上傳到微信伺服器
        wx.uploadImage({
            localId: localId, // 需要上傳的圖檔的本地ID，由chooseImage接口獲得
            isShowProgressTips: 1, // 預設為1，顯示進度提示
            success: function (res) {
                var serverId = res.serverId; // 傳回圖檔的伺服器端ID
                $('#serverId').text(serverId);
            }
        });
    }
});
           

執行個體2、下載下傳，剛上傳的圖檔，指定serverID

var serverId=$('#serverId').text();
wx.downloadImage({
    serverId: serverId, // 需要下載下傳的圖檔的伺服器端ID，由uploadImage接口獲得
    isShowProgressTips: 1, // 預設為1，顯示進度提示
    success: function (res) {
        var localId = res.localId; // 傳回圖檔下載下傳後的本地ID
        $('#imgTarget').attr('src',localId);
    }
});
           

從微信用戶端擷取使用者檔案，方法2，

可以使用html的File檔案域，讀取用戶端檔案，然後上傳到伺服器

<div class="container">
    <!--圖檔類型驗證方法1-->
    <input type="file" id="file" multiple accept="image/*" />
    <input type="button" id="btn1" value="選擇上傳檔案" οnclick="showFiles();" />
    <h4>選擇檔案如下:</h4>
    <img src="" id="img1" />
</div>
           

Js代碼：

//讀取圖檔，并上傳到伺服器執行個體
var fileBox = document.getElementById('file');
function showFiles() {
    //擷取選擇檔案的數組
    var fileList = fileBox.files;
    for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
        //圖檔類型驗證第二種方式
        if (/image\/\w+/.test(file.type))
            readFile(file);
        else
            console.log(file.name + ':不是圖檔');
    }
}
//讀取圖檔内容 為DataURL
function readFile(file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        var result = reader.result;
        $('#img1').attr('src', result)
        upload(result);
    }
    //上傳到自己的伺服器
    function upload(dataUrl){
        var  data=dataUrl.split(',')[1];
        //資料結果是轉換,轉換成二進制資料
        data=window.atob(data);
        var uint=new Uint8Array(data.length)
        for (var i = 0; i < data.length; i++) {
            uint[i]=data.charCodeAt(i);
        }
        var blob=new Blob([uint],{type:'image/jpeg'});
        //上傳到伺服器
        var fd=new FormData();
        fd.append('file',blob);
        fd.append('isclip', '-1');
        fd.append('maxsize', 1024*1024*10);
        fd.append('minsize', 0);
        fd.append('subfolder', '1');
        fd.append('automove',true);
        fd.append('extention', '.jpg');
        alert('開始上傳');
        var xhr = new XMLHttpRequest();
        xhr.open('post', '/common/upload', true);
        //監聽事件
        xhr.onreadystatechange = function (e) {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var data = eval('(' + xhr.responseText + ')');
                if (data.success == true) {
                    alert('上傳成功:');
                    alert(data.msg);
                } else {
                    alert(data.msg);
                }
            } else {
                //alert(xhr.readyState);
            }
        }
        xhr.send(fd);
    }
}
           

讀取用戶端圖檔，方法3，目前無效，代碼僅供參考

wx.chooseImage({
        count: 1, // 預設9
        sizeType: ['original'], 
        sourceType: ['album', 'camera'], 
        success: function (res) {
            var localId= res.localIds[0]; 
            //擷取圖檔對象
            try {
                var img=new Image();
                //此設定在微信浏覽器中無效,也不會抛出異常，後面的代碼不會執行
                img.setAttribute('crossOrigin', 'anonymous');
                img.οnlοad=function(){
                    var canvas=document.getElementById('canvasOne');
                    var ctx=canvas.getContext('2d');
                    canvas.width=img.width;
                    canvas.height=img.height;
                    ctx.clearRect(0,0,canvas.width,canvas.height);
                    ctx.drawImage(img,0,0,img.width,img.height);
                    try {
                        upload(canvas);
                    } catch (e) {
                        alert(e.name);
                        alert(e.message);
                    }
                }
                img.src=localId;
            } catch (e) {
                alert(e.name);
                alert(e.message);
            }
        }
    });
    //上傳到自己的伺服器
    function upload(canvas){
        //由于toDataURL()的浏覽器安全問題，如果不是同一個域的圖檔會抛出異常
        //是以此處
        var data=canvas.toDataURL('image/jpeg');
        data=data.split(',')[1];
        alert(data.length);
    }