uni——组件上传单张图片uni.chooseImage

案例演示

案例代码

<view class="four" @click="uploadImg">
	<block v-if="!succImg">
		<view class="xiangji">
			<image :src="$common.image('/static/xiangji.png')" mode="aspectFill"></image>
		</view>
		<view class="guihuan">
			请上传照片(拍照或者相册选择)
		</view>
	</block>
	<view class="showBox" v-if="succImg">
		<image :src="$common.image(succImg)" mode="widthFix" class="showImg"></image>
	</view>
</view>

data() {
    
    
	return {
    
    
			// 图片
			succImg: '',
		}
},
methods: {
    
    
	uploadImg() {
    
    
		uni.chooseImage({
    
    
			sourceType: ['album', 'camera'], //从相册、相机
			success: (chooseImageRes) => {
    
    
				const tempFilePaths = chooseImageRes.tempFilePaths;
				uni.uploadFile({
    
    
					url: config[config.env].apiUrl + '/api/common/upload',
					filePath: tempFilePaths[0],
					name: 'file',
					formData: {
    
    
						'user': 'test'
					},
					success: (uploadFileRes) => {
    
    
						// console.log(uploadFileRes);
						let res = JSON.parse(uploadFileRes.data)
						if (res.code == 1) {
    
    
							this.$common.success(res.msg) //上传成功提示词
							console.log(res);
							this.succImg = res.data.url
							// 调用接口 上传归还图片
							this.returnImg()
						}
						if (res.code == 0) {
    
    
							this.$common.success("非法图片") //上传成功提示词
						}
					}
				});
			}
		});
	},
	returnImg() {
    
    
		this.$common.request('post', '/order/doorImage', {
    
    
			image: this.succImg,
			// order_id:this.order_id
			order_id: 21
		}).then(res => {
    
    
			if (res.code == 1) {
    
    
				this.$common.success('图片提交成功')
			}
		})
	},	
}

.four {
    
    
			margin: 80rpx 40rpx 0;
			border: 2rpx solid #C3C3C3;
			border-radius: 20rpx;
			padding: 32rpx 0 36rpx 0;

			.xiangji {
    
    
				image {
    
    
					width: 83rpx;
					height: 75rpx;
				}
			}

			.guihuan {
    
    
				font-size: 30rpx;
				color: #959595;
				margin-top: 35rpx;
			}

			.showBox {
    
    
				text-align: center;

				.showImg {
    
    
					width: 90%;
				}
			}

		}

总结

https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile