更新记录 1.0.0(2020-03-27) 下载此版本 图片(选填) 点击预览图片 {{imageList.length}}/9 x <button type="primary" class="feedback-submit" @click="send">提交</button> { let temp = []; res.tempFilePaths.map((item, index) => { temp.push({ tempFilePath: item, name: res.tempFiles[index].name, size: res.tempFiles[index].size }); }); this.imageList = this.imageList.concat(temp); } }); }, previewImage(url) { //预览图片 let tempImageList = this.imageList.map(item => { return item.tempFilePath; }); uni.previewImage({ current: url, urls: tempImageList }); }, send() { FileUpload.imgsUpload(this.imageList).then(res=>{ console.log(res) }); } } }; <style> @font-face { font-family: uniicons; font-weight: normal; font-style: normal; src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype'); } page { background-color: #efeff4; } view { font-size: 28upx; } .input-view { font-size: 28upx; } .close-view { text-align: center; line-height: 14px; height: 16px; width: 16px; border-radius: 50%; background: #ff5053; color: #ffffff; position: absolute; top: -6px; right: -4px; font-size: 12px; } /* 上传 */ .uni-uploader { flex: 1; flex-direction: column; } .uni-uploader-head { display: flex; flex-direction: row; justify-content: space-between; } .uni-uploader-info { color: #b2b2b2; } .uni-uploader-body { margin-top: 16upx; } .uni-uploader__files { display: flex; flex-direction: row; flex-wrap: wrap; } .uni-uploader__file { margin: 10upx; width: 210upx; height: 210upx; } .uni-uploader__img { display: block; width: 210upx; height: 210upx; } .uni-uploader__input-box { position: relative; margin: 10upx; width: 208upx; height: 208upx; border: 2upx solid #d9d9d9; } .uni-uploader__input-box:before, .uni-uploader__input-box:after { content: ' '; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #d9d9d9; } .uni-uploader__input-box:before { width: 4upx; height: 79upx; } .uni-uploader__input-box:after { width: 79upx; height: 4upx; } .uni-uploader__input-box:active { border-color: #999999; } .uni-uploader__input-box:active:before, .uni-uploader__input-box:active:after { background-color: #999999; } .uni-uploader__input { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } /*问题反馈*/ .feedback-title { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 20upx; color: #8f8f94; font-size: 28upx; } .feedback-star-view.feedback-title { justify-content: flex-start; margin: 0; } .feedback-quick { position: relative; padding-right: 40upx; } .feedback-quick:after { font-family: uniicons; font-size: 40upx; content: '\e581'; position: absolute; right: 0; top: 50%; color: #bbb; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .feedback-body { background: #fff; } .feedback-textare { height: 200upx; font-size: 34upx; line-height: 50upx; width: 100%; box-sizing: border-box; padding: 20upx 30upx 0; } .feedback-input { font-size: 34upx; height: 50upx; min-height: 50upx; padding: 15upx 20upx; line-height: 50upx; } .feedback-uploader { padding: 22upx 20upx; } .feedback-star { font-family: uniicons; font-size: 40upx; margin-left: 6upx; } .feedback-star-view { margin-left: 20upx; } .feedback-star:after { content: '\e408'; } .feedback-star.active { color: #ffb400; } .feedback-star.active:after { content: '\e438'; } .feedback-submit { background: #007aff; color: #ffffff; margin: 20upx; } </style> 平台兼容性 图片(选填) 点击预览图片 {{imageList.length}}/9 x <button type="primary" class="feedback-submit" @click="send">提交</button> { let temp = []; res.tempFilePaths.map((item, index) => { temp.push({ tempFilePath: item, name: res.tempFiles[index].name, size: res.tempFiles[index].size }); }); this.imageList = this.imageList.concat(temp); } }); }, previewImage(url) { //预览图片 let tempImageList = this.imageList.map(item => { return item.tempFilePath; }); uni.previewImage({ current: url, urls: tempImageList }); }, send() { FileUpload.imgsUpload(this.imageList).then(res=>{ console.log(res) }); } } }; <style> @font-face { font-family: uniicons; font-weight: normal; font-style: normal; src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype'); } page { background-color: #efeff4; } view { font-size: 28upx; } .input-view { font-size: 28upx; } .close-view { text-align: center; line-height: 14px; height: 16px; width: 16px; border-radius: 50%; background: #ff5053; color: #ffffff; position: absolute; top: -6px; right: -4px; font-size: 12px; } /* 上传 */ .uni-uploader { flex: 1; flex-direction: column; } .uni-uploader-head { display: flex; flex-direction: row; justify-content: space-between; } .uni-uploader-info { color: #b2b2b2; } .uni-uploader-body { margin-top: 16upx; } .uni-uploader__files { display: flex; flex-direction: row; flex-wrap: wrap; } .uni-uploader__file { margin: 10upx; width: 210upx; height: 210upx; } .uni-uploader__img { display: block; width: 210upx; height: 210upx; } .uni-uploader__input-box { position: relative; margin: 10upx; width: 208upx; height: 208upx; border: 2upx solid #d9d9d9; } .uni-uploader__input-box:before, .uni-uploader__input-box:after { content: ' '; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #d9d9d9; } .uni-uploader__input-box:before { width: 4upx; height: 79upx; } .uni-uploader__input-box:after { width: 79upx; height: 4upx; } .uni-uploader__input-box:active { border-color: #999999; } .uni-uploader__input-box:active:before, .uni-uploader__input-box:active:after { background-color: #999999; } .uni-uploader__input { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } /*问题反馈*/ .feedback-title { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 20upx; color: #8f8f94; font-size: 28upx; } .feedback-star-view.feedback-title { justify-content: flex-start; margin: 0; } .feedback-quick { position: relative; padding-right: 40upx; } .feedback-quick:after { font-family: uniicons; font-size: 40upx; content: '\e581'; position: absolute; right: 0; top: 50%; color: #bbb; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .feedback-body { background: #fff; } .feedback-textare { height: 200upx; font-size: 34upx; line-height: 50upx; width: 100%; box-sizing: border-box; padding: 20upx 30upx 0; } .feedback-input { font-size: 34upx; height: 50upx; min-height: 50upx; padding: 15upx 20upx; line-height: 50upx; } .feedback-uploader { padding: 22upx 20upx; } .feedback-star { font-family: uniicons; font-size: 40upx; margin-left: 6upx; } .feedback-star-view { margin-left: 20upx; } .feedback-star:after { content: '\e408'; } .feedback-star.active { color: #ffb400; } .feedback-star.active:after { content: '\e438'; } .feedback-submit { background: #007aff; color: #ffffff; margin: 20upx; } </style>