uni-app上传图片组件（）

最新推荐文章于 2024-09-04 09:29:56 发布

今天的你很温柔

最新推荐文章于 2024-09-04 09:29:56 发布

阅读量381

点赞数

分类专栏： uni-app 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_45584157/article/details/120270014

版权

uni-app 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这是一个基于Vue的图片上传组件示例，展示了如何利用uni-app的API选择并上传图片，支持预览、删除图片功能，并将上传成功的图片URL传递给父组件。组件还包含了样式布局，确保图片显示和删除图标的位置正确。

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

<template>
	<view>
		<view class="photo_b">
			<view class="shang_base">
				<view class="photoImg" :style="{width:imgWidth+'rpx',height:imgHeight+'rpx'}"
					v-for="(item,index) in list" :key='index'>
					<image :src="item" mode="" style="width: 100%;height: 100%;" />
					<image class="code_close" @click.stop="bindDelete(index)" :src="imageUrl + 'ic_pic_del@2x.png'" />
				</view>
				<view class="photoImg" v-if="list.length < imgNum">
					<image :style="{width:imgWidth+'rpx',height:imgHeight+'rpx'}" :src="imageUrl + imgBaseImage"
						mode="" @click="uploadImg"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import app from '../App.vue'
	export default {
		name: "uploadImg",
		data() {
			return {
				imageUrl: app.globalData.imageUrl,
				list: [],
				url: []
			};
		},
		props: {
			// 上传图片张数
			imgNum: {
				type: Number
			},
			// 图片宽度
			imgWidth: {
				type: Number
			},
			// 图片高度
			imgHeight: {
				type: Number
			},
			// 基础图
			imgBaseImage:{
				type:String
			}
		},
		methods: {
			// 上传
			uploadImg() {
				const that = this;
				uni.chooseImage({
					count: 1, //一次性上传张数
					sizeType: ['compressed'],
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						uni.showLoading({
							title: "上传中.."
						})
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'http://xxxxxxxxx', //上传地址
								filePath: tempFilePaths[i],
								name: 'file',
								header: {
									'token': uni.getStorageSync('token')
								},
								formData: {},
								success: (res) => {
									uni.hideLoading()
									console.log(JSON.parse(res.data));
									const imgUrl = JSON.parse(res.data).data.fullurl;
									const imgUrls = JSON.parse(res.data).data.url;
									// let arr = []
									// arr.push(imgUrls)
									that.list.push(imgUrl)
									that.url.push(imgUrls)
									// that.urls2 = arr.join(",")
								}
							})
						}
						that.$emit('getImages', that.list)
					}
				})
			},
			// 删除图片
			bindDelete(i) {
				const that = this;
				that.list.splice(i, 1)
			},
		}
	}
</script>

<style>
	.photo_b {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.shang_base {
		margin-top: 24rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.photoImg {
		position: relative;
		margin-right: 10rpx;
		margin-bottom: 20rpx;
	}

	.photoImg:nth-child(4n) {
		margin-right: 0;
	}

	.code_close {
		position: absolute;
		right: 0;
		top: 0;
		width: 42rpx !important;
		height: 42rpx !important;
	}
</style>

使用：

<uploadImage :imgHeight="212" :imgWidth="336" :imgNum="1" :imgBaseImage='imgBaseImage' @getImages="getImages"></uploadImage>

methods:{
    getImages(list){
		console.log(list);
    },
}