标签：单图 url res app uploadImg uni data Upres

组件

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。