uniapp实现上传图片

 HTML部分如下： 

            上传照片 :
            
            
                
                    
                    
                
                
            
        

 附带图片：

 

 Css：

.shangchuan {
	width: 90%;
	height: 200rpx;
	margin: 0 auto;
	display: flex;
	align-items: center;
	.sc2 {
		width: 30%;
		height: 90%;
		border-radius: 10rpx;
		background-color: #dadfef;
		text-align: center;
		line-height: 240rpx;
		margin: 0 10rpx;
		position: relative;
		// background-color: #4CD964;
	}
	.Img3 {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
	.del {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		z-index: 1000;
		top: 0rpx;
		right: 0;
	}
	.sc3 {
		width: 96rpx;
		height: 96rpx;
		border-radius: 10rpx;
	}
}

js部分： 

// 点击上传图片
		upload() {
			uni.chooseImage({
				count: 3, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				loop: true,
				success: res => {
					console.log(res);
					if (res.tempFilePaths.length != 0) {
						this.imgList.push(res.tempFilePaths[0]);
					}
			 	console.log(JSON.stringify(res.tempFilePaths));
					var tempFilePaths = res.tempFilePaths;

					console.log(tempFilePaths);
					console.log(tempFilePaths[0]);
					uni.uploadFile({
						url: 'http://douzhuoqianshouba.xieenguoji.com/api/ajax/upload',
						filePath: tempFilePaths[0],
						name: 'file',
						success: uploadFileRes => {
							console.log('上传图片', JSON.parse(uploadFileRes.data));
						},
						fail(err) {
							console.log(err);
						}
					});
				}
			});
		},

      // 删除图片
		del(index) {
			this.imgList.splice(index, 1);
			console.log(this.imgList);
		},

最后结果：