uniapp 上传多图组件开发

<!-- 发布页面 -->
<template>
	<!-- <uni-section title="基本用法" type="line"></uni-section> -->
	<view>
		<uni-nav-bar :statusBar="true"  rightText="发布" left-icon="back"  @clickLeft="back"  @clickRight="submit">
		   <view class="center-display" @tap="changelook">
			   {{yinshi}}
			   <view class="icon iconfont icon-xialazhankai"></view>
			</view>
		</uni-nav-bar>
		
		<!-- 多行输入框 -->
		<view class="uni-textarea">
		 <textarea  v-model="text" placeholder="输入字体"/>
		</view>
		上面输入的文字:{{text}}
	    <!-- 上传图片 -->
		<view class="uni-list list-pd">
					<view class="uni-list-cell cell-pd">
						<view class="uni-uploader">
							<view class="uni-uploader-head">
								<view class="uni-uploader-title">点击可预览选好的图片</view>
								<view class="uni-uploader-info">{{imageList.length}}/9</view>
							</view>
							<view class="uni-uploader-body">
								<view class="uni-uploader__files">
									<block v-for="(image,index) in imageList" :key="index">
										<view class="uni-uploader__file">
											<view class="icon iconfont icon-shanchu" @tap="delect(index)"></view>
											<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
										</view>
									</block>
									<view class="uni-uploader__input-box">
										<view class="uni-uploader__input" @tap="chooseImage"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
	</view>
	
</template>

<script>
	import uniNavBar from "../../components/uni-nav-bar/uni-nav-bar.vue"
	var sourceType = [
			['camera'],
			['album'],
			['camera', 'album']
		]
		var sizeType = [
			['compressed'],
			['original'],
			['compressed', 'original']
		]
	let changelook=["所有人可见",'仅自己可见']
	export default {
		components:{
			uniNavBar
		},
		data() {
			return {
				yinshi:"所有人可见",
				text:"请输入",
				imageList: [],
				sourceTypeIndex: 2,
				sourceType: ['拍照', '相册', '拍照或相册'],
				sizeTypeIndex: 2,
				sizeType: ['压缩', '原图', '压缩或原图'],
				countIndex: 8,
				count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
			}
		},
		methods: {
			//返回
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			//发布
			submit(){
				console.log("发布")
			},
			//隐私
			changelook(){
				/* console.log("隐私")	 */		
				uni.showActionSheet({
					itemList: changelook,
					success:  (res)=> {
							this.yinshi=changelook[res.tapIndex];
						}
				});
			},
			
			// 选择图片
			chooseImage: async function() {
				 if (this.imageList.length === 9) {
				 		return;
				}
				 uni.chooseImage({
					 sourceType: sourceType[this.sourceTypeIndex],
					 sizeType: sizeType[this.sizeTypeIndex],
					count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length :
						     this.count[this.countIndex],
						    success: (res) => {
						            this.imageList = this.imageList.concat(res.tempFilePaths);
									console.log(this.imageList.length,'照片数量')
						        }
				})
			},
						
			//预览图片			
			previewImage: function(e) {
						    var current = e.target.dataset.src
						    uni.previewImage({
						        current: current,
						        urls: this.imageList
						    })
						},
			
			// 点击右上角删除图片
			delect(index){
				uni.showModal({
					title: '提示',
					content: '是否删除该图片？',
					success: (res) =>{
						if (res.confirm) {
							this.imageList.splice(index, 1)
						} 
					}
				});
			}


		}
	}
</script>

<style>
	.center-display{
		display: flex;
		align-items: center;  /* 垂直方向居中 */
		justify-content: center;  /* 左右方向居中   bug 未生效*/
		
	}
	
	.uni-textarea{
		border: 1rpx solid #eeeeee;
	}
	.cell-pd {
		padding: 22rpx 30rpx;
	}
	
	.list-pd {
		margin-top: 50rpx;
	}
	
	.icon-shanchu{
		position: absolute;
        right: 0;
		top: 0;
		background: #0055ff;
		color: #fffff;
		padding: 20rpx 10px;
		border-radius: 10rpx;
	}
	.uni-uploader__file{
		position: absolute;
	}
	

</style>

问题：1.无法预览9张图片

         2.删除没起作用