uni-app 单图上传组件

组件

components/uploadImg.vue

<template>
	<view class="container">
		<image v-if="UploadUrl" @click="uploadImg()" :style="{'width': size[0] + 'rpx', height: size[1] + 'rpx' }"
			:src="UploadUrl" />
		<image v-else @click="uploadImg" :style="{'width': size[0] + 'rpx', height: size[1] + 'rpx' }"
			:src="defaultImg" />
		<image v-if="UploadUrl"
			:style="{width: '34rpx', height: '34rpx', position: 'absolute' , top: '0', left: size[0] + 'rpx' }"
			src="../static/close.png" @click="deleteImg()" />
	</view>
</template>

<script>
	import defaultImg from '../static/plus.png'
	export default {
		name: 'uploadImg',
		props: {
			size: {
				type: Array,
				default: () => [200, 200]
			},
			defaultImg: {
				type: String,
				default: defaultImg
			}
		},

		data() {
			return {
				UploadUrl: ''
			}
		},
		methods: {
			uploadImg() {
				var that = this;
				uni.chooseImage({
					count: 1, // 选择数量限制
					sizeType: ['original', 'compressed'], // 原图、压缩图
					sourceType: ['album', 'camera'], // 相册、拍照选择
					success: async (res) => {
						const tempFilePaths = res.tempFiles[0].path;
						// 图片上传
						uni.showLoading({
							title: '图片上传中...'
						});
						const uploadTask = uni.uploadFile({
							url: that.$host +'api/common/upload', // post请求地址
							filePath: tempFilePaths,
							name: 'file', // 待确认
							header: {
								'Content-Type': 'multipart/form-data',
								'token': uni.getStorageSync('token')
							},
							success: function(res) {
								const Upres = JSON.parse(res.data)
								if (Upres.code == 0) {
									uni.showModal({
										title: '上传失败',
										content: Upres.msg,
									})
								} else {
									that.UploadUrl = Upres.data.fullurl;
									setTimeout(() => {
										that.$emit('upload', {
											url: Upres.data.url
										})
									}, 200)
								}
							},
							fail: function(failed) {
								console.log('Error:', failed.data);
							},
							complete: () => {
								uni.hideLoading();
							}
						});
					}
				})
			},
			//删除图片
			deleteImg() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除这张图片吗',
					success: (res) => {
						if (res.confirm) {
							that.UploadUrl = '';
							setTimeout(() => {
								that.$emit('upload', {
									url: ''
								})
							}, 200)
						} else if (res.cancel) {

						}
					}
				})
			},
		},
	}
</script>
<style>
	.container {
		position: relative;
	}
</style>

使用

<template>
	<view class="container">
		<view class="new-list-item">
			<view class="title">
				略缩图： 
			</view>
			<view class="list-item-image">
				<uploadImg :size="[150, 150]" @upload="upload"></uploadImg>
			</view>
		</view>
	</view>
</template>


<script>
	import uploadImg from '@/components/uploadImg.vue'
	export default {
		components: {
			uploadImg,
		},
		data() {
			return {
				form: {
					litpic: '',
				}
			}
		},
		methods: {
			//获取子组件的图片url
			upload(e) {
				// console.log('e ==>',e);
				this.form.litpic = e.url;
			},
		}
	}
</script>

效果图

标签：单图,url,res,app,uploadImg,uni,data,Upres
来源： https://www.cnblogs.com/gumo9/p/16365838.html