移动端图片上传与 h5 wx 图片上传

一、移动端浏览器图片上传小结

核心代码

利用h5 input元素的新特性 type = 'file' 选择文件

                    accept 代表接收文件的类型 'image/*' 表示接收所有的图片格式
                    
                    capture表示，可以捕获到系统默认的设备，比如：camera--照相机；camcorder--摄像机；microphone--录音
                    
                    multiple表示： 可以支持多选, 比如同时支持 camera--照相机；camcorder--摄像机；microphone--录音

通过input 选择图片之后通过表单提交给后台

核心代码如下

        

          
          
        
        
        // 上传图片
        var uploadFile = function() {
          var file = $('#takePhoto').val()
          if (!file) {
            return false
          }
          $("#importForm").attr('enctype', 'multipart/form-data')
          var formData = new FormData($("#importForm")[0])
          $.ajax({
            type: "POST",
            data: formData,
            url: 'http://bs.papasports.com.cn/api/img/uploader/dir/shop',
            contentType: false,
            processData: false,
          }).success(function (data) {
            var datas = JSON.parse(data)
            $('#avatar').attr('src', datas.data.imgUrl)
            param.image = datas.data.imgUrl
          }).error(function(er) {
            alert(JSON.stringify(er))
          })
        }

上传接口是将base64 编码的图片发送给服务器，接口返回图片地址，然后将图片地址发送给后台，上传结束。

二、h5微信图片上传到自己服务器的坑

整个过程以及当时情况大致如下：

整个需求耗时大概两天，第一天时间主要在尝试上传流程，因为当时不知道微信本地上传图片到自己服务器需要调用微信的哪些API，一开始搜索了一些资料，

但都没有找到有用，所以开始研读jssdk文档，最后相关开发人员讨论猜测上传流程。

确认上传后，开始开发。

先是调用wx.chooseImage接口获取localIds，然后直接把localIds传给后台，后台可以接收成功，但无法识别图片的扩展名，返回的数据无法使用，
调试一段时间后依旧无法识别返回的数据，所以放弃了。

第二次在调用wx.chooseImage接口获取localIds后，紧接着调用wx.getLocalImgData接口，将获取的localIds转化成base64编码的数据流，然后
传给后台，但结果依旧和第一次一样，后台依旧无法获取图像的扩张名，又调试了好长一段时间。期间后台尝试将获取的base64编码转成二进制图片数据，还是没成功。

第三次在失败两次后开始反思上传流程，回到jssdk官方文档，同时继续网上搜索关于上传的流程，最后在知乎找到了线索，同时结合jssdk文档，确定了最终得上传流程，
在调用wx.chooseImage接口获取localIds后，继续调用wx.uploadImage接口上传图片到微信的服务器获取serverId, 然后前端将获取的serverId通过ajax传给后台，
后台获取到serverId后调用wx提供的"多媒体接口",
也就是现在的获取临时素材接口https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID
serverId即Media_id
去获取数据，但是期间出现了几个问题，
第一： 总是报token失效不合法的问题，在研究了好久之后才在官方文档里面发现wx提供了两个不同的token用于调用不同的接口，真是坑呀，因为wx文档说明不够清晰。
第二：获取素材接口调用成功后获取不到数据，最后又是在文档里面发现wx将返回的数据放在了放回的响应头里面，而不是响应体里，又是一个大坑。
再解决上述问题后终于将图片从本地上传到了自己的服务器。