개발 과정에서 하나의 프로젝트 요구 사항에 대해 여러 그룹의 사진을 업로드해야 합니다. 업로드 페이지의 일부 스크린샷은 다음과 같습니다.
그룹이 많기 때문에 각 그룹에 대한 레이아웃을 작성할 수 없습니다. 그룹이므로 for 루프는 이미지를 선택하는 데 사용됩니다. 표시, 먼저 데이터 정의
fileList: [{ name: "驾驶证", cid:"0", picimage:[], }, { name: "整车外观", cid: "1", picimage: [], }, { name: "整车铭牌", cid: "2", picimage: [], }, { name: "发动机全貌", cid: "3", picimage: [], },{ name: "增压器全貌", cid: "4", picimage: [], }]
페이지 레이아웃 코드 부분은 게시되지 않습니다. 루프를 사용할 때 발생하는 문제는 다음과 같습니다. 1. 동일한 wx.chooseImage()를 호출할 때. 2. 모든 그룹을 동시에 구별할 수 없습니다. 해결책: 1. 그림을 선택할 때 그림을 배열로 연결하십시오. 2. 각 그룹의 ID를 설정합니다. 이미지 선택 버튼을 클릭하면 id가 전달됩니다. chooseImage는 수신된 ID를 기반으로 이미지를 표시할 그룹을 선택합니다.
chooseWxImage: function (e) { var _this = this; var id = e.currentTarget.dataset.picid; console.log("id-----" + id) if (_this.data.fileList[id].picimage.length>1){ wx.showModal({ content: '你最多只能选择2张照片', showCancel:false, }) }else{ wx.chooseImage({ count:2, sizeType: "compressed", sourceType: ['album', 'camera'], success: function (res) { var arr = _this.data.fileList[id].picimage; for (let i in res.tempFilePaths) { arr.push(res.tempFilePaths[i]) } _this.setData({ fileList: _this.data.fileList }) } })} },
업로드 부분, 애플릿만 하나씩 업로드가 가능하기 때문에 업로드 방법을 먼저 처리해야 합니다. 먼저 모든 이미지 배열을 컬렉션에 넣은 다음 컬렉션을 순회하여 배열 단위로 업로드합니다.
upload: function (e) { var that = this; var fileList = that.data.fileList; var tempath = [] ;//图片地址,将所有图片数组放进去 for(let i in fileList){ tempath.push(fileList[i].picimage) } console.log("tempimage"+tempath) wx.showLoading({ title: '上传中...', }) for (let j in tempath) { requestUtil.uploadimg({//uploading为封装的一个方法 url: '上传地址', path: tempath[j],//遍历地址,将每个数组循环上传 }) wx.hideLoading(); wx.showToast({ title: '上传成功!', icon:'success', duration:'2500', }) } } //多张图片上传,这部分代码是参考网上的,使用当中遇到一个bug就是如果传过来的数组为空的话,就会卡死小程序,因此需要加上判断数组不能为空 function uploadimg(data) { var that = this, i = data.i ? data.i : 0,//当前上传的哪张图片 success = data.success ? data.success : 0,//上传成功的个数 fail = data.fail ? data.fail : 0;//上传失败的个数 wx.uploadFile({ url: data.url, filePath: data.path[i], name: 'file',//这里根据自己的实际情况改 formData: data.formData,//这里是上传图片时一起上传的数据 success: (resp) => { if (resp.statusCode == 200) { success++;//图片上传成功,图片上传成功的变量+1 console.log(resp) console.log(i); } }, fail: (res) => { fail++;//图片上传失败,图片上传失败的变量+1 console.log(data.path) console.log('fail:' + i + "fail:" + fail); }, complete: () => { console.log(i); i++;//这个图片执行完上传后,开始上传下一张 if (i == data.path.length) { //当图片传完时,停止调用 console.log('执行完毕'); console.log('成功:' + success + " 失败:" + fail); } else {//若图片还没有传完,则继续调用函数 console.log(i); data.i = i; data.success = success; data.fail = fail; that.uploadimg(data); } } }); }
관련 추천:
WeChat 애플릿 개발 및 이미지 업로드 기능 예시 공유
CodeIgniter가 이미지를 성공적으로 업로드하는 전체 과정을 공유
위 내용은 사례 공유 - 미니 프로그램 이미지 그룹 업로드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!