1.因为小程序的api描述都比较简单，并没有wxml及wxss的描述，要想实现小程序demo上的上传图片样式首先需要下载weui.wxss并引入到项目中
小程序版weui下载地址：https://github.com/Tencent/weui-wxss
可以将整个文件下载下来，将其中的dist文件夹导入到独立的小程序中作为参考
把weui.wxss放到自己的项目中后，在app.wxss中import weui.wxss 作为全局样式
/**app.wxss**/@import "weui.wxss";
照着domo把wxml相关内容复制进自己的文件中
图片上传 { {images.length}}/9 
根据demo修改相关js:
首先实现选择图片功能
Page({ /** * 页面的初始数据 */ data: { images: [],//临时图片地址 }, chooseImage: function () { var that = this; wx.chooseImage({ count: 9, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { console.log(res); var tempFilePaths = res.tempFilePaths that.setData({ images: that.data.images.concat(tempFilePaths) }) } }) }, previewImage: function (e) { wx.previewImage({ current: e.currentTarget.id, // 当前显示图片的http链接 urls: this.data.images // 需要预览的图片http链接列表 }) } }) 在此基础上进行上传图片，上传文件官方方法如下：
wx.uploadFile({ url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址 filePath: tempFilePaths[0], name: 'file', formData:{ 'user': 'test' }, success: function(res){ var data = res.data //do something } 发现了尴尬的问题，发现上传图片一次只能传一张
参考了https://www.cnblogs.com/xjwy/p/6956120.html的递归方法，进行多张图片的上传
方法如下:
function uploadimg(data) { var that=this; var i = data.i ? data.i : 0,//要上传的图片 success = data.success ? data.success : 0,//上传成功的个数 fail = data.fail ? data.fail : 0;//上传失败的个数 wx.uploadFile({ url: data.url, //开发者服务器 url filePath: data.path[i], name: 'file', formData: { 'user': 'test' }, success: function (res) { success++; //do something }, fail: function () { fail++; }, complete: function () { i++; if (i == data.path.length) { console.log("success：" + success + "fail" + fail); }else{ data.i = i; data.success = success; data.fail = fail; uploadimg(data); } } })} 点击上传按钮后调用该方法，进行图片上传
uploadImg: function (e) { var that = this; if (that.data.images.length > 0) { uploadimg({//调用图片上传uploadimg方法 url: that.data.upImgUrl,//这里是你图片上传的接口 path: that.data.images//这里是选取的图片的地址数组 }); } else { console.log("没有可上传的文件"); } } 全部js代码如下
function uploadimg(data) { var that=this; var i = data.i ? data.i : 0,//要上传的图片 success = data.success ? data.success : 0,//上传成功的个数 fail = data.fail ? data.fail : 0;//上传失败的个数 wx.uploadFile({ url: data.url, //开发者服务器 url filePath: data.path[i], name: 'file', formData: { 'user': 'test' }, success: function (res) { success++; //do something }, fail: function () { fail++; }, complete: function () { i++; if (i == data.path.length) { console.log("success：" + success + "fail" + fail); }else{ data.i = i; data.success = success; data.fail = fail; uploadimg(data); } } })}Page({ /** * 页面的初始数据 */ data: { images: [],//临时图片地址 upImgUrl: 'https://........'//上传图片服务器地址 }, chooseImage: function () { var that = this; wx.chooseImage({ count: 9, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { console.log(res); var tempFilePaths = res.tempFilePaths that.setData({ images: that.data.images.concat(tempFilePaths) }) } }) }, previewImage: function (e) { wx.previewImage({ current: e.currentTarget.id, // 当前显示图片的http链接 urls: this.data.images // 需要预览的图片http链接列表 }) }, uploadImg: function (e) { var that = this; if (that.data.images.length > 0) { uploadimg({ url: that.data.upImgUrl,//这里是你图片上传的接口 path: that.data.images//这里是选取的图片的地址数组 }); } else { console.log("没有可上传的文件"); } }}) 小程序还在摸索阶段没实际开发测试过，暂时先记录下