小程序开发技巧总结 (3)

我的数据有三次循环量,因为在从一个循环列表里面操作两个循环。暂且说它是复合循环吧。当时困我好多天的难题用以下这段代码解决,快夸我~哈哈

//移除图片,按id移除 removeImg: function(e) { var that = this; var listArr = []; var imgArr = []; for (var i = 0; i < this.data.newBillList.length; i++) { if (e.target.dataset.shipmentid == this.data.newBillList[i].ShipmetId) { //相等的当前选中的数据,移除列表的图片的需要重新组合数据 for (var j = 0; j < this.data.newBillList[i].ImageList.length; j++) { //第一种写法 if (e.target.id != this.data.newBillList[i].ImageList[j]) { //相等的值是要移除的值,不作处理 imgArr.push(this.data.newBillList[i].ImageList[j]); //重新push图片 } //第二种写法,es6的写法 //let id = e.target.id; //this.data.newBillList[i].ImageList[j].splice(id,1);//删除 //splice(index,count) 第一个参数是索引,第二个参数是删除的个数 } //把数据重新push var row = { ShipmetId: this.data.newBillList[i].ShipmetId, EarliestPickTime: this.data.newBillList[i].EarliestPickTime, FromAddress: this.data.newBillList[i].FromAddress, ToAddress: this.data.newBillList[i].ToAddress, DriverName: this.data.newBillList[i].DriverName, LicenseNumber: this.data.newBillList[i].LicenseNumber, DocumentsCnt: this.data.newBillList[i].DocumentsCnt, ImageList: imgArr } listArr.push(row); } else { //数据不变的是不用处理的列表块,直接push var row = this.data.newBillList[i]; listArr.push(row); } } 14. 小程序上传文件wx.uploadFile

这一部分被我形容是第二难题。(当然,是针对我在自己当前开发的功能里面~)
这里分为几个部分:

从本地相册选择图片或使用相机拍照。wx.chooseImage(Object object)

wx.chooseImage({ count: this.data.count[this.data.countIndex], sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: res => { // tempFilePath可以作为img标签的src属性显示图片 this.setData({ shipmentid: e.target.dataset.shipmentid, imageListArr: res.tempFilePaths }) //调用处理列表图片的方法 this.addImageList(1, 0);//该函数完整代码在第6点 }, fail: function(data) { wx.showToast({ title: "选择图片出错", icon: "none", duration: 1000 }); } });

在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。wx.previewImage(Objectobject)

//预览图片 previewImage: function(e) { let current = e.target.dataset.src; let imageList = []; for (let i = 0; i < this.data.newBillList.length; i++) { if (e.target.dataset.shipmentid == this.data.newBillList[i].ShipmetId) { imageList = this.data.newBillList[i].ImageList; } wx.previewImage({ current: current, //当前显示图片的链接 urls: imageList //需要预览的图片链接列表 }) } },

将本地资源上传到服务器UploadTask wx.uploadFile(Object object)

这里要说一下,我这边的需求是先把图片上传到开发者服务器,然后再从开发者服务器把图片读取保存到另一个系统所在的服务器上。读取图片的时候不用下载图片,我上传图片的时候会在数据库一个表保存图片的相关信息,列表id,图片名称,在开发者服务器的所在路径等一些相关用到的字段。

第一步:先上传图片到开发者服务器,客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data

//上传图片,将本地资源上传到开发者服务器 uploadImage: function(e) { var that = this; that.setData({ shipmentid: e.target.dataset.shipmentid }); var listArr = []; var uploadImgCount = 0; var uploadArr = []; var imgLength = 0; for (var i = 0; i < this.data.newBillList.length; i++) { if (e.target.dataset.shipmentid == this.data.newBillList[i].ShipmetId) { imgLength = this.data.newBillList[i].ImageList.length; var index = i; console.log("列表的待上传的回单数:" + imgLength); if (imgLength < 1) { wx.showToast({ title: '没有可上传的回单', icon: 'none', mask: true, duration: 1000 }); var row = this.data.newBillList[i]; listArr.push(row); } else { //启动上传等待中... wx.showToast({ title: '正在上传...', icon: 'loading', mask: true, duration: 10000 }); //遍历图片列表上传 for (var j = 0; j < this.data.newBillList[i].ImageList.length; j++) { //记录当前列表的索引,因为到了success里就获取不到啦 var index = i; //上传图片到开发者服务器 wx.uploadFile({ url: app.globalData.apiurl + '/api/NoUploadBackBill/PostImageFile', filePath: this.data.newBillList[i].ImageList[j], //要上传文件资源的路径 name: 'image', // 这里的具体值,要与后台保持一致 header: { 'content-type': 'multipart/form-data', 'Authorization': "BasicAuth " + util.getToken() }, formData: { //HTTP 请求中其他额外的 form data 'shipmentid': this.data.shipmentid, 'imgIndex': j //上传的图片编号(后台提供给前端判断图片是否全部上传完) }, success: res => { //console.log("res:"+res.data); uploadImgCount++; uploadArr.push(res.data); //判断是否上传完毕 if (uploadImgCount == imgLength) { //显示数据,调用处理列表图片的方法,只修改所选运单的回单数即可 this.addImageList(2, uploadImgCount); //保存操作的列表数到TMS数据表 let row = { ShipmetId: this.data.newBillList[index].ShipmetId, EarliestPickTime: this.data.newBillList[index].EarliestPickTime, FromAddress: this.data.newBillList[index].FromAddress, ToAddress: this.data.newBillList[index].ToAddress, DriverName: this.data.newBillList[index].DriverName, LicenseNumber: this.data.newBillList[index].LicenseNumber, DocumentsCnt: uploadImgCount, ImageList: uploadArr } this.setData({ saveImageList: row }); //保存图片到TMS this.saveImage(); } }, fail: res => { console.log("uploadImage fail:" + res); wx.hideToast(); wx.showModal({ title: '错误提示', content: '上传图片失败', showCancel: false, success: function(res) {} }); } }); } } } } }

这里大家一定很关心我的后台代码是如何编写的,我是参考第一个链接做的。

参考资料:
微信小程序实现图片上传功能

.NET WebAPI实现图片上传

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpjjpp.html