uniapp原生头像上传封装

最新推荐文章于 2024-07-08 09:36:07 发布

半支-烟

最新推荐文章于 2024-07-08 09:36:07 发布

阅读量151

点赞数

本文链接：https://blog.csdn.net/m0_62134648/article/details/131308264

版权

这是一个使用uni-app框架构建的用户信息表单，包括头像上传功能。用户可以输入用户名、密码，点击上传头像按钮选择图片，并提交表单。图片上传成功后，会更新头像URL。目前缺少表单验证和提交功能的具体实现。

摘要由CSDN通过智能技术生成

<template>
	<view>
		<u-form :model="form" ref="uForm" labelWidth="80">
			<u-form-item label="头像">
				<image :src="avatarUrl" alt="头像"  />
				<u-button type="primary" @click="uploadAvatar">上传头像</u-button>
			</u-form-item>
			<u-form-item label="用户名">
				<u-input v-model="form.name" />
			</u-form-item>
			<u-form-item label="密码">
				<u-input type="password" passwordIcon='true' v-model="form.password" />
			</u-form-item>
			<u-form-item label="确认密码">
				<u-input type="password" v-model="form.confirm" />
			</u-form-item>
			<u-form-item label="用户姓名">
				<u-input v-model="form.name" />
			</u-form-item>
			<u-form-item label="手机号码">
				<u-input v-model="form.sex" />
			</u-form-item>
			<u-form-item label="电子邮箱">
				<u-input v-model="form.sex" />
			</u-form-item>
		</u-form>
		<u-button @click="submit">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				// 上传头像
				uploadUrl: '/api/qhdz-civil-administration/AppRegister/put-file',
				avatarUrl: '',
			}
		},
		mounted() {},
		methods: {
			// 注册
			submit() {

			},
			uploadAvatar() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						const tempFilePath = tempFilePaths[0];
						uni.uploadFile({
							url: '/api/blade-doorplate/upload/upload_picture', // 替换为实际的上传接口地址
							filePath: tempFilePath,
							name: 'file',
							success: (uploadRes) => {
								// 上传成功后保存头像URL到data中
								const a = JSON.parse(uploadRes.data)
								console.log(a);
								this.avatarUrl = a.data
								console.log(this.avatarUrl )
							},
							fail: (err) => {
								console.error(err);
							},
						});
					},
				});
			},

		}
	}
</script>

<style>

</style>