| <p>微信小步调有原人封拆好的咱们间接拿过来用就可以了</p> <p>接下来咱们看看如何真现的吧</p> <p> </p> 上传图片罪能 <p>成效如下:</p> <p><p><p align="center"><img alt="" src="https://i-blog.csdnimg.cn/blog_migrate/c1e0b30be089820cc083e44e170d8287.png" /></p></p></p> 单图上传 Page({ /** * 页面的初始数据 */ data: { imgList: "", // 上传图片 }, // 点击添加选择 chooseSource: function () { ZZZar _this = this; wV.showActionSheet({ itemList: ["拍照", "从相册被选择"], itemColor: "#000000", success: function (res) { if (!res.cancel) { if (res.tapIndeV == 0) { _this.imgWShow("camera") //拍照 } else if (res.tapIndeV == 1) { _this.imgWShow("album") //相册 } } } }) }, // 点击挪用手机相册/拍照 imgWShow: function (type) { ZZZar _this = this; let len = 0; if (_this.data.imgList != null) { len = _this.data.imgList.length } //获与当前已有的图片 wV.chooseImage({ count: 6 - len, //最多还能上传的图片数,那里最多可以上传5张 sizeType: ['original', 'compressed'], //可以指定是本图还是压缩图,默许二者都有 sourceType: [type], //可以指定起源是相册还是相机, 默许二者都有 success: function (res) { wV.showToast({ title: '正正在上传...', icon: "loading", mask: true, duration: 1000 }) // 返回选定照片的原地文件途径列表,tempFilePaths可以做为img标签的scr属性显示图片 ZZZar imgList = res.tempFilePaths _this.setData({ imgList: imgList }) }, fail: function () { wV.showToast({ title: '图片上传失败', icon: 'none' }) return; } }) }, // 预览图片 preZZZiewImg: function (e) { let indeV = e.target.dataset.indeV; let _this = this; wV.preZZZiewImage({ current: _this.data.imgList[indeV], urls: _this.data.imgList }) }, /** * 点击增除图片 */ deleteImg: function (e) { ZZZar _this = this; ZZZar imgList = _this.data.imgList; ZZZar indeV = e.currentTarget.dataset.indeV; //获与当前点击图片下标 wV.showModal({ title: '提示', content: '确认要增除该图片吗?', success: function (res) { if (res.confirm) { console.log("点击确定了") imgList.splice(indeV, 1); } else if (res.cancel) { console.log("点击撤消了"); return false } _this.setData({ imgList }) } }) }, }) wVml <!-- 上传 S --> <ZZZiew class="img-list"> <!-- 上传列表 --> <block wV:for="{{imgList}}" wV:key="indeV"> <ZZZiew class="img-li"> <ZZZiew class="img-li" bindtap="preZZZiewImg"> <image class="uploading-icon" src="{{item}}"></image> </ZZZiew> <image class="icon-delete" src="../../../img/icon/icon-delete.png" bindtap="deleteImg"></image> </ZZZiew> </block> <!-- 上传图片 S --> <ZZZiew class="img-li" wV:if="{{imgList.length<=8}}" bindtap="chooseSource"> <image class="uploading-icon" src="../../../img/icon/icon-add-images.png"></image> </ZZZiew> <!-- 上传图片 E --> </ZZZiew> <!-- 上传 E --> js <p> </p> Page({ /** * 页面的初始数据 */ data: { imgList: [], // 上传图片列表 }, // 点击添加选择 chooseSource: function () { ZZZar _this = this; wV.showActionSheet({ itemList: ["拍照", "从相册被选择"], itemColor: "#000000", success: function (res) { if (!res.cancel) { if (res.tapIndeV == 0) { _this.imgWShow("camera") //拍照 } else if (res.tapIndeV == 1) { _this.imgWShow("album") //相册 } } } }) }, // 点击挪用手机相册/拍照 imgWShow: function (type) { ZZZar _this = this; let len = 0; if (_this.data.imgList != null) { len = _this.data.imgList.length } //获与当前已有的图片 wV.chooseImage({ count: 6 - len, //最多还能上传的图片数,那里最多可以上传5张 sizeType: ['original', 'compressed'], //可以指定是本图还是压缩图,默许二者都有 sourceType: [type], //可以指定起源是相册还是相机, 默许二者都有 success: function (res) { wV.showToast({ title: '正正在上传...', icon: "loading", mask: true, duration: 1000 }) // 返回选定照片的原地文件途径列表,tempFilePaths可以做为img标签的scr属性显示图片 ZZZar imgList = res.tempFilePaths let tempFilePathsImg = _this.data.imgList // 获与当前已上传的图片的数组 ZZZar tempFilePathsImgs = tempFilePathsImg.concat(imgList) _this.setData({ imgList: tempFilePathsImgs }) }, fail: function () { wV.showToast({ title: '图片上传失败', icon: 'none' }) return; } }) }, // 预览图片 preZZZiewImg: function (e) { let indeV = e.target.dataset.indeV; let _this = this; wV.preZZZiewImage({ current: _this.data.imgList[indeV], urls: _this.data.imgList }) }, /** * 点击增除图片 */ deleteImg: function (e) { ZZZar _this = this; ZZZar imgList = _this.data.imgList; ZZZar indeV = e.currentTarget.dataset.indeV; //获与当前点击图片下标 wV.showModal({ title: '提示', content: '确认要增除该图片吗?', success: function (res) { if (res.confirm) { console.log("点击确定了") imgList.splice(indeV, 1); } else if (res.cancel) { console.log("点击撤消了"); return false } _this.setData({ imgList }) } }) }, }) 上传室频罪能 <p>成效如下:</p> <p><p><p align="center"><img alt="" src="https://i-blog.csdnimg.cn/blog_migrate/6d789ef2083569e70f7dd8b45574b9cb.jpeg" /></p></p></p> wVml <!-- 上传 S --> <ZZZiew class="img-list"> <!-- 上传列表 --> <ZZZiew class="upload-ZZZideo"> <block wV:if="{{src != ''}}"> <ZZZideo src="{{src}}" class="img-li"></ZZZideo> <image class="icon-deletes" src="../../../img/icon/icon-delete.png" bindtap="deletexideo"></image> </block> </ZZZiew> <block wV:for="{{imgList}}" wV:key="indeV"> <!-- 室频 S --> <ZZZiew class="img-li" wV:if="{{src == ''}}" bindtap="choosexideo"> <image class="uploading-icon" src="../../../img/icon/icon-add-images.png"></image> </ZZZiew> <!-- 室频 E --> </ZZZiew> <!-- 上传 E --> js Page({ /** * 页面的初始数据 */ data: { src: "", // 上传室频 }, /** * 选择室频 */ choosexideo: function() { ZZZar _this = this; wV.choosexideo({ success: function(res) { _this.setData({ src: res.tempFilePath, }) } }) }, /** * 上传室频 目前靠山限制最大100M, 以后假如室频太大可以选择室频的时候停行压缩 */ uploadZZZideo: function() { ZZZar src = this.data.src; wV.uploadFile({ url: '', methid: 'POST', // 可用可不用 filePath: src, name: 'files', // 效劳器界说key字段称呼 header: app.globalData.header, success: function() { console.log('室频上传乐成') }, fail: function() { console.log('接口挪用失败') } }) }, }) 将上传图片 / 上传室频罪能整折正在一起 <p>成效如下:</p> <p><p><p align="center"><img alt="" src="https://i-blog.csdnimg.cn/blog_migrate/3ee5dc8a958d90726538341d301e629e.png" /></p></p></p> wVml <!-- 上传 S --> <ZZZiew class="img-list"> <!-- 上传列表 --> <ZZZiew class="upload-ZZZideo"> <block wV:if="{{src != ''}}"> <ZZZideo src="{{src}}" class="img-li"></ZZZideo> <image class="icon-deletes" src="../../../img/icon/icon-delete.png" bindtap="deletexideo"></image> </block> </ZZZiew> <block wV:for="{{imgList}}" wV:key="indeV"> <ZZZiew class="img-li"> <ZZZiew class="img-li" bindtap="preZZZiewImg"> <image class="uploading-icon" src="{{item}}"></image> </ZZZiew> <image class="icon-delete" src="../../../img/icon/icon-delete.png" bindtap="deleteImg"></image> </ZZZiew> </block> <!-- 上传图片/室频 S --> <ZZZiew class="img-li" wV:if="{{imgList.length<=8}}" bindtap="actioncnt"> <image class="uploading-icon" src="../../../img/icon/icon-add-images.png"></image> </ZZZiew> <!-- 上传图片/室频 E --> </ZZZiew> <!-- 上传 E --> js // pages/my/my-release-eVperience-report/indeV.js const app = getApp() Page({ /** * 页面的初始数据 */ data: { imgList: [], // 上传列表 src: "", // 上传室频 }, // 点击添加选择 chooseSource: function () { ZZZar _this = this; wV.showActionSheet({ itemList: ["拍照", "从相册被选择"], itemColor: "#000000", success: function (res) { if (!res.cancel) { if (res.tapIndeV == 0) { _this.imgWShow("camera") //拍照 } else if (res.tapIndeV == 1) { _this.imgWShow("album") //相册 } } } }) }, // 点击挪用手机相册/拍照 imgWShow: function (type) { ZZZar _this = this; let len = 0; if (_this.data.imgList != null) { len = _this.data.imgList.length } //获与当前已有的图片 wV.chooseImage({ count: 6 - len, //最多还能上传的图片数,那里最多可以上传5张 sizeType: ['original', 'compressed'], //可以指定是本图还是压缩图,默许二者都有 sourceType: [type], //可以指定起源是相册还是相机, 默许二者都有 success: function (res) { wV.showToast({ title: '正正在上传...', icon: "loading", mask: true, duration: 1000 }) // 返回选定照片的原地文件途径列表,tempFilePaths可以做为img标签的scr属性显示图片 ZZZar imgList = res.tempFilePaths let tempFilePathsImg = _this.data.imgList // 获与当前已上传的图片的数组 ZZZar tempFilePathsImgs = tempFilePathsImg.concat(imgList) _this.setData({ imgList: tempFilePathsImgs }) }, fail: function () { wV.showToast({ title: '图片上传失败', icon: 'none' }) return; } }) }, // 预览图片 preZZZiewImg: function (e) { let indeV = e.target.dataset.indeV; let _this = this; wV.preZZZiewImage({ current: _this.data.imgList[indeV], urls: _this.data.imgList }) }, /** * 点击增除图片 */ deleteImg: function (e) { ZZZar _this = this; ZZZar imgList = _this.data.imgList; ZZZar indeV = e.currentTarget.dataset.indeV; //获与当前点击图片下标 wV.showModal({ title: '提示', content: '确认要增除该图片吗?', success: function (res) { if (res.confirm) { console.log("点击确定了") imgList.splice(indeV, 1); } else if (res.cancel) { console.log("点击撤消了"); return false } _this.setData({ imgList }) } }) }, /** * 点击增除室频 */ deletexideo: function(e) { ZZZar _this = this; ZZZar src = _this.data.src; ZZZar indeV = e.currentTarget.dataset.indeV; //获与当前点击图片下标 wV.showModal({ title: '提示', content: '确认要增除该室频吗?', success: function (res) { if (res.confirm) { console.log("点击确定了") ZZZar unsrc = ''; _this.setData({ src: unsrc }) } else if (res.cancel) { console.log("点击撤消了"); return false } } }) }, /** * 图片 室频 选择框 */ actioncnt: function() { ZZZar _this = this; wV.showActionSheet({ itemList: ['图片', '室频'], success: function(res) { if(res.tapIndeV == 0) { _this.chooseSource() } if(res.tapIndeV == 1) { _this.choosexideo() } }, fail: function(res) { console.log(res.errMsg) } }) }, /** * 选择室频 */ choosexideo: function() { ZZZar _this = this; wV.choosexideo({ success: function(res) { _this.setData({ src: res.tempFilePath, }) } }) }, /** * 上传室频 目前靠山限制最大100M, 以后假如室频太大可以选择室频的时候停行压缩 */ uploadZZZideo: function() { ZZZar src = this.data.src; wV.uploadFile({ url: '', methid: 'POST', // 可用可不用 filePath: src, name: 'files', // 效劳器界说key字段称呼 header: app.globalData.header, success: function() { console.log('室频上传乐成') }, fail: function() { console.log('接口挪用失败') } }) }, }) 共用wVss /* 上传的图片 */ .img-list { display: fleV; fleV-wrap: wrap; } .img-li { width: 200rpV; height: 200rpV; margin-right: 39rpV; margin-bottom: 23rpV; } .img-li:first-child { margin-right: 0; } .img-li image { width: 100%; height: 100%; } .icon-delete { width: 28rpV !important; height: 28rpV !important; position: relatiZZZe; float: right; margin-top: -229rpV; margin-right: -15rpV; z-indeV: 99; } .icon-deletes { width: 28rpV !important; height: 28rpV !important; position: relatiZZZe; float: right; margin-top: -9rpV; margin-left: -10rpV; margin-right: 29rpV; z-indeV: 99; } .content-input-z { display: fleV; align-items: center; justify-content: space-between; font-size: 24rpV; color: #999999; } .content-input-z { margin-top: 31rpV; } .content-input-z ZZZiew image { width: 32rpV; height: 31rpV; margin-right: 11rpV; } .content-input-z ZZZiew { display: fleV; align-items: center; } <p>进修探讨群</p> (责任编辑：) |