本文共 4492 字，大约阅读时间需要 14 分钟。

前提已经在wx.config()中,将图片接口验证通过。

微信js-sdk 中上传图片接口(uploadImage)和下载图片接口(downloadImage)都是针对微信服务器本身的。以为准

注：

1.使用chooseImage接口获取到微信客户端图片地址的与都是 weixin://xxxx

2.上传图片有效期3天，可用微信多媒体接口下载图片到自己的服务器，此处获得的 serverId 即 media_id，参考文档 

3.目前多媒体文件下载接口的频率限制为10000次/天，如需要调高频率，请邮件weixin-open@qq.com,邮件主题为【申请多媒体接口调用量】，请对你的项目进行简单描述，附上产品体验链接，并对用户量和使用量进行说明。

实例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);            }        });    }});

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);    }});

可以使用html的File文件域，读取客户端文件，然后上传到服务器

   
    
        
        
        
    
选择文件如下:
    
    
   

//读取图片，并上传到服务器实例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 + ':不是图片');    }}//读取图片内容 为DataURLfunction 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);    }}

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);    }

转载地址：http://efogi.baihongyu.com/