// components/imageUpload/imageUpload.js import {baseUrl, URL_CONFIG} from '../../assets/js/project.config' Component({ /** * 组件的属性列表 */ properties: { // 最大上传个数 maxLength: { type: Number, value: 9 }, // 单个图片限制 单位MB maxSize: { type: Number, value: 1 }, // 图片的回显 initImgsList:{ type:String } }, /** * 组件的初始数据 */ data: { // 图片路径数组 tempFilePaths: [] }, lifetimes: { attached: function() { console.log(' this.data.initImgsList', this.data.initImgsList); let initImgArr if(!!this.data.initImgsList){ initImgArr = this.data.initImgsList.split(',') } const arr = [] if(initImgArr && initImgArr.length > 0){ for (let index = 0; index < initImgArr.length; index++) { arr.push( baseUrl + URL_CONFIG + 'sys/common/download/' + initImgArr[index]) } } this.setData({ tempFilePaths:arr }) console.log(this.data.tempFilePaths); }, }, /** * 组件的方法列表 */ methods: { // 选择图片 upload() { let that = this; let maxSize = this.data.maxSize * 1024 * 1024 let flag = true let maxLength = this.data.maxLength // 将图片的id抛出 let imgids = [] console.log("maxLength", maxLength); wx.chooseImage({ count: maxLength, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: res => { wx.showToast({ title: '正在上传...', icon: 'loading', mask: true, duration: 1000 }) // 判断数量 if (res.tempFiles.length > maxLength) { wx.hideToast() flag = false wx.showToast({ title: `最多上传${maxLength}张`, mask: true, duration: 1000 }) return false } res.tempFiles.forEach(item => { if (item.size > maxSize) { wx.hideToast() flag = false wx.showModal({ title: '错误提示', content: `图片大于${that.data.maxSize}MB`, showCancel: false, success(res) { if (res.confirm) { console.log('用户点击确定') } } }) return false } }) // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片 let tempFilePaths = res.tempFilePaths; if (flag) { that.setData({ tempFilePaths: tempFilePaths }) } /** * 上传完成后把文件上传到服务器 */ if (flag) { let count = 0; for (let i = 0; i < tempFilePaths.length; i++) { //上传文件 wx.uploadFile({ url: baseUrl + URL_CONFIG + 'sys/common/upload', filePath: tempFilePaths[i], name: "file", formData: { filetype: "image", }, success: function (res) { imgids.push(JSON.parse(res.data).result.id) count++; //如果是最后一张,则隐藏等待中 if (count == tempFilePaths.length) { wx.hideToast(); that.triggerEvent("getIds",imgids) } }, fail: function (res) { wx.hideToast(); wx.showModal({ title: '错误提示', content: '上传图片失败', showCancel: false, success: function (res) {} }) } }); } } }, fail(err) { console.log("失败", err); } }) }, // 预览图片 previewImage(e) { console.log("e", e); let index = e.target.dataset.index; let that = this; wx.previewImage({ current: that.data.tempFilePaths[index], urls: that.data.tempFilePaths, success: function (res) { console.log("res", res); }, fail: function (fail) { //console.log('fail') } }) }, // 删除图片 deleteImage(e) { let that = this; let tempFilePaths = that.data.tempFilePaths; let index = e.currentTarget.dataset.index; //获取当前长按图片下标 wx.showModal({ title: '提示', content: '确定要删除此图片吗?', success: function (res) { if (res.confirm) { console.log('确定'); tempFilePaths.splice(index, 1); } else if (res.cancel) { console.log('取消'); return false; } that.setData({ tempFilePaths }); } }) } } })