<view class="page__bd">
<mp-cells>
<mp-cell>
<mp-uploader bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uplaodFile}}" files="{{files}}" max-count="5" title="图片上传" tips="图片上传提示"></mp-uploader>
</mp-cell>
</mp-cells>
</view>
Page({
data: {
files: [{
url: 'http://mmbiz.qpic.cn/mmbiz_png/VUIF3v9blLsicfV8ysC76e9fZzWgy8YJ2bQO58p43Lib8ncGXmuyibLY7O3hia8sWv25KCibQb7MbJW3Q7xibNzfRN7A/0',
}, {
loading: true
}, {
error: true
}]
},
onLoad() {
this.setData({
selectFile: this.selectFile.bind(this),
uplaodFile: this.uplaodFile.bind(this)
})
},
chooseImage: function (e) {
var that = this;
wx.chooseImage({
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
that.setData({
files: that.data.files.concat(res.tempFilePaths)
});
}
})
},
previewImage: function(e){
wx.previewImage({
current: e.currentTarget.id, // 当前显示图片的http链接
urls: this.data.files // 需要预览的图片http链接列表
})
},
selectFile(files) {
console.log('files', files)
// 返回false可以阻止某次文件上传
},
uplaodFile(files) {
console.log('upload files', files)
// 文件上传的函数,返回一个promise
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('some error')
}, 1000)
})
},
uploadError(e) {
console.log('upload error', e.detail)
},
uploadSuccess(e) {
console.log('upload success', e.detail)
}});
官方文档里,并没有调用chooseImage()方法的地方, 在mp-uoloader标签里 添加catchtap、bindtap方法调用,都会造成触发两次上传图片窗口的bug,同时,组件自带的点击图片放大wx.previewImage()方法,也没有明确调用的地方,问题还有点击图片放大时,也是触发上传窗口, 去掉catchtap、bindtap方法,就没有问题,但是去掉后 wx.chooseImage()方法就触发不了
实际使用和在文档中写的很多都不一致,比如选择图片的时候,不能设置去掉原图的选项,预览的时候不占满全屏,最后把uploader的源码找到,放在本地,才发现,文档中提到的很多属性,根本就没实现,只能修修改改了一下,最后完美解决我的各种需求
我想读取files属性的值,结果读不了
下图的files="{{picture_files}}" , 在AppData内,是永远为空的数组
<mp-uploader bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uplaodFile}}" files="{{picture_files}}" binddelete="deleteFile" max-count="5" title="" tips="请上传合适的图片..."></mp-uploader>
请问解决了吗? 属性delete 配置可以用吗?
谢邀,解决了吗
我这边上传图片的方法是在一个组件上绑定一个点击事件,在点击事件中调用
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
}});
触发图片上传事件,选择图片后在success方法中调用后台接口,将图片传到后台
wx.previewImage({
urls: [imgSrc1,imgSrc2] // 需要预览的图片列表
})
这个方法是在微信中打开图片预览(实际上此时已经离开小程序了,关闭图片的时候再回到原先的小程序)