uniapp upload图片上传实现

uniapp yekong 231℃
<template>
	<div @click="chooseImage">
		<slot></slot>
	</div>
</template>

<script>
	import configs from '@/config/config.js'
	export default {
		data() {
			return {
				show: false,
				configs
			}
		},
		props: {
			name: {
				type: String,
				default () {
					return '';
				}
			}
		},
		onShow() {

		},
		methods: {
			chooseImage() {
				var that = this;
				console.log(123)
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: res => {
						console.log(res);
						// that.uploadimg(res.tempFilePaths[0]);
						plus.zip.compressImage({
								src: res.tempFilePaths[0],
								dst: '_doc/a.jpg',
								quality: 70, //压缩比例
								overwrite: true,
								width: '350px' //图片宽度
							},
							function(e) {
								//执行上传
								that.uploadimg(e.target);
							},
							function(error) {
								console.log('Compress error!');
							}
						);
					},
					fail: err => {
						// #ifdef MP
						uni.getSetting({
							success: res => {
								let authStatus = res.authSetting['scope.album'] && res.authSetting[
									'scope.camera'];
								if (!authStatus) {}
							}
						});
						// #endif
					}
				});
			},
			uploadimg(url) {
				var that = this;
				if (uni.getStorageSync('token')) {
					let a = uni.uploadFile({
						url: configs.upload, // 仅为示例,非真实的接口地址
						filePath: url,
						name: 'image',
						header: {
							Authorization: 'Bearer ' + uni.getStorageSync('token')
						},
						formData: {
							upload_name: 'image'
						},
						success: (res) => {
							console.log(res)
							console.log(JSON.parse(res.data))
							console.log(1234)
							that.$emit('getdata', JSON.parse(res.data).data)
							if (JSON.parse(res.data).code == 401) {
								uni.redirectTo({
									url: '/pages/login/login'
								})
							}
						},
						fail: (res) => {
							if (res.code == 401) {
								uni.redirectTo({
									url: '/pages/login/login'
								})
							}
						}
					});
				} else {
					uni.redirectTo({
						url: '/pages/login/login'
					})
				}
			}
		}
	}
</script>

<style>
</style>

使用

<template>
	<view class="formbody">
		<u--form labelWidth="100" labelPosition="left" ref="form1">
			<uploadImg @getdata="getprofile">
				<u-form-item label="头像" prop="userInfo.qq" borderBottom ref="item1">
					<div class="userhead">
						<avatars :size='50' :src="data.profile"></avatars>
					</div>
				</u-form-item>
			</uploadImg>
			<u-form-item label="昵称" borderBottom ref="item1">
				<u--input inputAlign="right" v-model="data.nickname" border="none"></u--input>
			</u-form-item>
		</u--form>
		<u-button class="mt20" color="#20ACA7" type="primary" @click="add">保存</u-button>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import uploadImg from '@/components/uploadImg.vue'
	import avatars from '@/components/avatars.vue'
	import {
		setUserInfo,
		getUserInfo
	} from '@/config/api.js'
	export default {
		components: {
			uploadImg,
			avatars
		},
		data() {
			return {
				data: {
					nickname: '',
					phone: '',
					profile: ''
				}
			};
		},
		mounted() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				var that = this;
				getUserInfo({
					custom: {
						auth: true
					}
				}).then(res => {
					console.log(res)
					that.data = res
				}).catch(err => {

				})
			},
			getprofile(e) {
				this.data.profile = e
			},
			add() {
				var that = this;
				if (!that.data.nickname) {
					uni.showToast({
						title: '请输入昵称'
					})
					return
				}
				setUserInfo(that.data, {
					custom: {
						auth: true
					}
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.$refs.uToast.show({
							type: 'success',
							title: '提示',
							message: "更新成功",
							complete() {
								uni.navigateBack({})
							}
						})
					}
				}).catch(err => {

				})
			},
		},
	};
</script>

<style scoped lang="scss">
	.container {
		background-color: rgb(239, 239, 239);
		width: 100vw;
		height: 100vh;
		overflow-y: auto;

		.group_1 {
			flex: 1 1 auto;
			overflow-y: auto;

			.section_1 {
				padding: 41rpx 50rpx;
				background: #fff;

				.image_2 {
					width: 127rpx;
					height: 127rpx;
				}

				.group_2 {
					margin-left: 31rpx;
					flex: 1 1 auto;
					align-self: center;

					.text {
						color: rgb(34, 34, 34);
						font-size: 24rpx;
						line-height: 23rpx;
						white-space: nowrap;
					}

					.text_1 {
						margin-top: 12rpx;
						color: rgb(153, 153, 153);
						font-size: 24rpx;
						line-height: 19rpx;
						white-space: nowrap;
					}
				}
			}

			.group_3 {
				position: relative;

				.section_2 {
					padding: 47rpx 36rpx 47rpx 100rpx;
					background-image: url('https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/619aed4a8611d00011b5a328/619f91da9eab8900119cd321/16378475921091096906.png');
					background-size: 100% 100%;

					.text_2 {
						color: rgb(34, 34, 34);
						font-size: 24rpx;
						line-height: 23rpx;
						white-space: nowrap;
					}

					.text_4 {
						color: rgb(34, 34, 34);
						font-size: 24rpx;
						line-height: 18rpx;
						white-space: nowrap;
					}
				}

				.section_3 {
					padding: 48rpx 36rpx 46rpx 100rpx;
					background-image: url('https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/619aed4a8611d00011b5a328/619f91da9eab8900119cd321/16378475921091096906.png');
					background-size: 100% 100%;

					.text_8 {
						color: rgb(34, 34, 34);
						font-size: 24rpx;
						line-height: 22rpx;
						white-space: nowrap;
					}

					.text_9 {
						margin-bottom: 3rpx;
						color: rgb(34, 34, 34);
						font-size: 24rpx;
						line-height: 18rpx;
						white-space: nowrap;
					}
				}

				.section_4 {
					position: absolute;
					left: 50rpx;
					top: 50%;
					transform: translateY(-50%);
					border: solid 2rpx rgb(0, 0, 0);

					.image_3 {
						width: 31rpx;
						height: 28rpx;
					}

					.icon_1 {
						margin-top: 86rpx;
						width: 31rpx;
						height: 27rpx;
					}

					.image_5 {
						margin-top: 84rpx;
						width: 30rpx;
						height: 30rpx;
					}

					.image_7 {
						margin-top: 91rpx;
						width: 30rpx;
						height: 27rpx;
					}

					.image_8 {
						margin-top: 81rpx;
						width: 27rpx;
						height: 34rpx;
					}

					.icon_2 {
						margin-top: 81rpx;
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		}

		.tab-bar {
			padding: 26rpx 39rpx 16rpx 49rpx;
			background-color: rgb(255, 255, 255);
			height: 130rpx;
			border-left: solid 2rpx rgb(231, 231, 231);
			border-right: solid 2rpx rgb(231, 231, 231);
			border-top: solid 2rpx rgb(231, 231, 231);
			border-bottom: solid 2rpx rgb(231, 231, 231);
			position: relative;

			.group_4 {
				color: rgb(0, 172, 167);
				font-size: 22rpx;
				line-height: 22rpx;
				white-space: nowrap;
				width: 59rpx;
				position: absolute;
				left: 49rpx;
				top: 26rpx;

				.text_18 {
					margin-top: 8rpx;
				}
			}

			.group_5 {
				color: rgb(0, 0, 0);
				font-size: 22rpx;
				line-height: 21rpx;
				white-space: nowrap;
				width: 60rpx;
				position: absolute;
				left: 248rpx;
				top: 26rpx;

				.text_19 {
					margin-top: 9rpx;
				}
			}

			.group_6 {
				color: rgb(0, 0, 0);
				font-size: 22rpx;
				line-height: 22rpx;
				white-space: nowrap;
				width: 60rpx;
				position: absolute;
				left: 449rpx;
				top: 26rpx;

				.text_20 {
					margin-top: 8rpx;
				}
			}

			.group_7 {
				color: rgb(0, 0, 0);
				font-size: 22rpx;
				line-height: 20rpx;
				white-space: nowrap;
				width: 59rpx;
				position: absolute;
				left: 649rpx;
				top: 50%;
				transform: translateY(-50%);

				.text_21 {
					margin-top: 9rpx;
				}
			}

			.image_9 {
				width: 54rpx;
				height: 54rpx;
			}
		}
	}

	.groups {
		background: #fff;
	}

	.icons {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 69rpx;
		flex-wrap: nowrap;
		flex-direction: row;

		image {
			width: 30rpx;
		}
	}

	.formbody {
		width: 690rpx;
		margin: auto;
		background: #fff;
	}

	.w400 {
		width: 400rpx;
	}

	.mt20 {
		margin-top: 40rpx;
	}

	.userhead {
		height: 70rpx;
		width: 490rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;

		image {
			width: 70rpx;
			height: 70rpx;
		}
	}
</style>

喜欢 (2)