微信小程序 - 上传和下载图片到服务器

为什么80%的码农都做不了架构师？>>>   

微信小程序有着强大的API，提供了小程序的上传和下载，那么我在此分享一下。

首先要注意不管上传还是下载都要在微信公众平台设置小程序上传、下载的合法域名！

点击设置 - 开发设置，可以看到服务器域名，点击修改，设置一下你的上传、下载合法域名， 否则会报错。

1、将本地资源上传到开发者服务器，可参考 API：wx.uploadFile

直接贴代码：这里只示例上传一张图片，若上传多张根据业务循环调用即可。（或者设置计数flag等于图片数组长度则上传完成否则继续调用上传函数，思路和循环相同）

    wx.chooseImage({  
          count: 1, // 默认9  
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
          success: function (res) {  
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片  
            var tempFilePaths = res.tempFilePaths;  
            wx.uploadFile({  
              url: 'https://...',      //仅为示例，非真实的接口地址
              filePath: tempFilePaths[0],  
              name: 'img',  
              header: {    
                "Content-Type": "multipart/form-data",  
                'accept': 'application/json'
              },  
              formData:{  
                'user':'test'  //其他额外的formdata，可不写  
              },  
              success: function(res){  
                console.log(res);  
              }  
            })  
          }  
        })  

2、 下载文件资源到本地可参考 API：wx.downloadFile

直接贴代码：这里我选择将下载的视频保存相册文件中，因为下载成功后返回文件的本地临时路径 ，如需持久保存，需在主动调用 wx.saveFile，才能在小程序下次启动时访问得到。

   wx.downloadFile({
      url: 'https://...', //下载资源的 url
      success: function (res) {
        if (res.statusCode === 200) {
          //保存文件到本地
          wx.saveFile({
            tempFilePath: res.tempFilePath,
            success: function (res2) {
              //保存视频到系统相册
              wx.saveVideoToPhotosAlbum({
                filePath: res2.savedFilePath,
                success(res3) {
                  console.log( res3)
                }
              })
            }
          })
        }
      }
    })

 

水平有限，若有问题请留言交流！

互相学习，共同进步 ：） 转载请注明出处谢谢！

转载于:https://my.oschina.net/hp2017/blog/1831410