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相关内容复制进自己的文件中
<view class="page__bd">
<view class="weui-cells">
<view class="weui-cell">
<view class="weui-cell__bd">
<view class="weui-uploader">
<view class="weui-uploader__hd">
<view class="weui-uploader__title">图片上传</view>
<view class="weui-uploader__info">{{images.length}}/9</view>
</view>
<view class="weui-uploader__bd">
<view class="weui-uploader__files" id="uploaderFiles">
<block wx:for="{{images}}" wx:key="*this">
<view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">
<image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
</view>
</block>
</view>
<view class="weui-uploader__input-box">
<view class="weui-uploader__input" bindtap="chooseImage"></view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<button bindtap="uploadImg">确定上传图片</button>
根据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
}
发现了尴尬的问题,发现上传图片一次只能传一张
参考了的递归方法,进行多张图片的上传
方法如下:
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("没有可上传的文件");
}
}
})
小程序还在摸索阶段没实际开发测试过,暂时先记录下