上传代码

uniapp04/pages/texttwo/texttwo.vue

@@ -0,0 +1,70 @@
+<template>
+  <view class="container">
+    <view class="example-body custom-image-box">
+      <text class="text">选择头像</text>
+      <uni-file-picker 
+        limit="1" 
+        :del-icon="false" 
+        disable-preview 
+        :imageStyles="imageStyles"
+        file-mediatype="image"
+        @select="handleFileSelect">选择</uni-file-picker>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      imageStyles: {
+        width: 64,
+        height: 64,
+        border: {
+          radius: '50%'
+        }
+      },
+      listStyles: {
+        // 是否显示边框
+        border: true,
+        // 是否显示分隔线
+        dividline: true,
+        // 线条样式
+        borderStyle: {
+          width: 1,
+          color: 'blue',
+          style: 'dashed',
+          radius: 2
+        }
+      },
+    }
+  },
+  methods: {
+    handleFileSelect(e) {
+      console.log('Selected files:', e.tempFiles);
+      // 这里可以添加更多逻辑，比如预览图片等
+    }
+  }
+}
+</script>
+<style lang="scss">
+	.example-body {
+		padding: 10px;
+		padding-top: 0;
+	}
+
+	.custom-image-box {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.text {
+		font-size: 14px;
+		color: #333;
+	}
+</style>
+