uniapp+vue3實現上傳圖片組件封裝功能

更新時間：2024年07月21日 11:25:39 作者：全棧^_^小菜鳥

這篇文章主要介紹了uniapp+vue3實現上傳圖片組件封裝功能,首先創(chuàng)建一個?components 文件在里面進行組件的創(chuàng)建,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下

首先創(chuàng)建一個 components 文件在里面進行組件的創(chuàng)建

下面是 vip組件的封裝也就是圖片上傳組件只是我的命名是隨便起的

 
<template>
	<!--圖片 -->
	<view class="up-page">
		<!--圖片-->
		<view class="show-box" v-for="(item,index) in imageList" :key="index">
			<image class="full" :src="item" :data-src="image" @tap="previewImage(item)">
			</image>
			<view class="delect-icon" @tap="delect(index)">
				<image class="full" :src="clearIcon" mode=""></image>
			</view>
		</view>
		<view v-if="VideoOfImagesShow" @tap="chooseVideoImage" class="box-mode">
			<image class="full" :src="selectfile" mode=""></image>
		</view>
	</view>
</template>
<script setup>  
import { ref,onUnmounted } from 'vue';  
// 定義響應式數據  
const clearIcon = ref('../../static/xxx.png');  
const selectfile = ref('../../static/jiahao.png');  
const VideoOfImagesShow = ref(true);  
const imageList = ref([]);  
const videoList = ref([]);  
const sourceType = ref(['拍攝', '相冊', '拍攝或相冊']);  
const sourceTypeIndex = ref(2);  
const cameraList = ref([  
  { value: 'back', name: '后置攝像頭', checked: 'true' },  
  { value: 'front', name: '前置攝像頭' }  
]);  
const cameraIndex = ref(0);  
const maxCount = ref(9);  
// 生命周期鉤子（onMounted, onUnmounted等）  
onUnmounted(() => {  
  imageList.value = [];  
  sourceTypeIndex.value = 2;  
  sourceType.value = ['拍攝', '相冊', '拍攝或相冊'];  
});  
// 方法  
function chooseVideoImage() {  
  uni.showActionSheet({  
    title: '選擇上傳類型',  
    itemList: ['圖片'], // 注意：這里只有'圖片'，如果需要視頻應添加'視頻'  
    success: res => {  
      if (res.tapIndex === 0) {  
        chooseImages();  
      }  
      // 注意：原代碼中沒有實現chooseVideo，這里未添加  
    }  
  });  
}  
function chooseImages() {  
  uni.chooseImage({  
    count: maxCount.value,  
    sizeType: ['original', 'compressed'],  
    sourceType: ['album', 'camera'],  
    success: res => {  
      imageList.value = [...imageList.value, ...res.tempFilePaths];  
      if (imageList.value.length + videoList.value.length === maxCount.value) {  
        VideoOfImagesShow.value = false;  
      }  
    }  
  });  
}  
function previewImage(e) {  
  uni.previewImage({  
    // current: e.currentTarget.dataset.url || e, // 假設你通過某種方式傳遞了圖片的URL  
	current:  e, // 假設你通過某種方式傳遞了圖片的URL
    urls: imageList.value  
  });  
}  
// 刪除圖片的函數  
function delect(index) {  
  uni.showModal({  
    title: '提示',  
    content: '是否要刪除該圖片',  
    success: res => {  
      if (res.confirm) {  
        // 使用splice方法刪除圖片，注意需要訪問.value  
        imageList.value.splice(index, 1);  
        if (imageList.value.length+videoList.value.length  == maxCount.value) {
        VideoOfImagesShow.value = false;
        } else {
        	VideoOfImagesShow.value = true;
        }
      }  
    }  
  });  
} 
</script> 
<style lang="scss">
	/* 統(tǒng)一上傳后顯示的盒子寬高比 */
	.box-mode {
		width: 27vw;
		height: 27vw;
		border-radius: 8rpx;
		overflow: hidden;
	}
	.full {
		width: 100%;
		height: 100%;
	}
	.up-page {
		display: flex;
		flex-wrap: wrap;
		display: flex;
		width: 100%;
		.show-box:nth-child(3n){
			margin-right: 0;
		}
		.show-box {
			position: relative;
			margin-bottom:4vw;
			margin-right: 4vw;
			@extend .box-mode;
			.delect-icon {
				height: 40rpx;
				width: 40rpx;
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				z-index: 1000;
			}
		}
	}
</style>

直接在頁面引用

<view class="imgbox">
			<view class="example-body">
				<!-- <uni-file-picker limit="9" title="最多選擇9張圖片"></uni-file-picker> -->
				<div>選擇照片-最多只能選擇九張</div>
				<vip></vip>  //上傳圖片的組件
			</view>
		</view>

最終樣子