上传图片

package.json

@@ -68,6 +68,7 @@
     "@vue/shared": "^3.0.0",
     "core-js": "^3.6.5",
     "flyio": "^0.6.2",
+    "image-tools": "^1.4.0",
     "regenerator-runtime": "^0.12.1",
     "uni-read-pages": "1.0.5",
     "uni-simple-router": "2.0.7",

src/components/chooseImage/chooseImage.vue

@@ -39,25 +39,14 @@
 		methods: {
 			//上传图片
 			chooseImageHandle() {
-				console.log("[上传图片]")
 				let that = this;
 				let limit = parseInt(this.limit);
 				uni.chooseImage({
 					count: limit, //默认9
 					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
 					sourceType: ['album'], //从相册选择
-					success: function(res) {
-						console.log(res)
-						let tempFiles = res.tempFiles;
-						tempFiles.forEach(function(item, index) {
-							let filePath = item.path;
-							let filename = filePath.substr(filePath.lastIndexOf('/') + 1);
-							that.tempFileList.push({
-								name: filename,
-								path: filePath
-							})
-						})
-
+					success: function(res) {
+						that.tempFileList.push(res.tempFiles[0])
 					}
 				})
 			},

src/pages/center/adv.vue

 <template>
-		<view class="panel">
-			<view class="panel-item panel-item-bottom">
-				<text class="panel-text">彩店类型</text>
-			</view>
-
-			<view class="panel-item">
-				<view class="panel-text">海报显示名称水印</view>
-				<switch class="switch" :checked="true" color="#1A9BFC" />
-			</view>
-
-			<view class="panel-txt">
-				<input type="text" class="panel-txt-txt" placeholder="彩店名称" />
-			</view>
-
-			<view class="panel-item-bottom panel-top"></view>
-
-			<view class="panel-item">
-				<text class="panel-text">海报显示店主二维码</text>
-				<!-- <liSwitch :checked="true"  width="90" bg="#1A9BFC" /> -->
-				<switch class="switch" :checked="true" color="#1A9BFC" />
-			</view>
-
-			<view class="panel-img">
-				<imgUpload />
-			</view>
-			
-			<button type="default" class="btn" @click="subimit">提交</button>
+	<view class="panel">
+		<view class="panel-item panel-item-bottom">
+			<text class="panel-text">彩店类型</text>
+			<uni-combox :border="false" :candidates="candidates" labelWidth="50px"></uni-combox>
 		</view>
+
+		<view class="panel-item">
+			<view class="panel-text">海报显示名称水印</view>
+			<switch class="switch" :checked="true" color="#1A9BFC" />
+		</view>
+
+		<view class="panel-txt">
+			<input type="text" class="panel-txt-txt" placeholder="彩店名称" />
+		</view>
+
+		<view class="panel-item-bottom panel-top"></view>
+
+		<view class="panel-item">
+			<text class="panel-text">海报显示店主二维码</text>
+			<!-- <liSwitch :checked="true"  width="90" bg="#1A9BFC" /> -->
+			<switch class="switch" :checked="true" color="#1A9BFC" />
+		</view>
+
+		<view class="panel-img">
+			<imgUpload limit="10" :FileList="imgList" />
+		</view>
+
+		<button type="default" class="btn" @click="subimit">提交</button>
+	</view>
 </template>
 
-<script>
-	import imgUpload from '@/components/chooseImage/chooseImage.vue'
-	
-	export default {
-		components:{
-			imgUpload
-		},		
+<script>
+	import imgUpload from '@/components/chooseImage/chooseImage.vue'
+	import {
+		pathToBase64
+	} from "image-tools"
+
+	export default {
+		components: {
+			imgUpload
+		},
 		data() {
 			return {
-
+				candidates: ['双彩店', '福彩', '体彩'],
+				imgList: []
 			}
 		},
 		methods: {
-			subimit(){
-				uni.showToast({
-					title:'接口暂未实现'
-				})
+			async subimit() {
+				if (this.imgList.length < 1) {
+					return
+				}
+
+				const base64 = await this.imgToBase64(this.imgList[0].path)
+				console.log(base64)
+
+				uni.showToast({
+					title: '接口暂未实现'
+				})
+			},
+			imgToBase64(data) {
+				return new Promise((resolve, reject) => {
+					pathToBase64(data)
+						.then((base64) => {
+							resolve(base64.split(',')[1]);
+						})
+						.catch((error) => {
+							console.error(error);
+							reject(error);
+						});
+				});
 			}
 		}
 	}
@@ -73,9 +97,9 @@
 
 	.panel-text {
 		color: #000;
-		word-wrap: break-word;
-		line-height: 30px;
-		height: 30px;
+		word-wrap: break-word;
+		line-height: 30px;
+		height: 30px;
 		text-align: center;
 	}
 
@@ -90,21 +114,21 @@
 		color: #8c8c8c8c;
 		background-color: #F5F5F5;
 		height: 38px;
-	}
-	
-	.switch{
-		transform: scale(0.7,0.7);
-	}
-	
-	.panel-img{
-		height: 90px;
-		padding: 0px 20px;
-	}
-	
-	.btn {
-		height: 44px;
-		margin-top: 15px;
-		background-color: #D23338;
-		color: #FFFFFF;
+	}
+
+	.switch {
+		transform: scale(0.7, 0.7);
+	}
+
+	.panel-img {
+		height: 90px;
+		padding: 0px 20px;
+	}
+
+	.btn {
+		height: 44px;
+		margin-top: 15px;
+		background-color: #D23338;
+		color: #FFFFFF;
 	}
 </style>