Hbuilder实现多张图片同时上传

Hbuilder实现多张图片同时上传

• 实现界面如下所示

• 话不多说，直接上代码

<template>
		<view class="page-box">
			<nav-bar :title="'上传材料'" :isBack="true" bg="#fff"></nav-bar>
		<view class="main-box">
		
	<!-- 基础表单校验 -->
	<uni-forms ref="valiForm" :rules="rules" :model="valiFormData" labelWidth="200rpx" label-position="top">
			<!-- 描述 -->
			<uni-forms-item label="描述" class="textarea" name="activityDescription">
				<uni-easyinput type="textarea" v-model="valiFormData.activityDescription" placeholder="请输入内容" :maxlength="1900"/>
			</uni-forms-item>
	
			<!-- 图片上传-->
			<uni-forms-item label="图片上传" name="imgs">
				<view class="cu-form-group">
				<view class="grid col-4 grid-square flex-sub">
				
			<!-- 显示图片 -->
			<view class="bg-img" v-for="(item,index) in imgPath" :key="index" @tap="ViewImage" :data-url="imgList[index]">
				<image :src="imgPath[index]" mode="aspectFill"></image>
				<!-- 删除图片 -->
				<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
				<text class="cuIcon-close"></text>
				</view>
			</view>
				
			<!-- 选择图片 -->
			<view class="solids" @tap="ChooseImage" v-if="imgPath.length<8">
				<text class='cuIcon-cameraaddfill'></text>
			</view>	
							
				</view>
			</view>
		</uni-forms-item>
	</uni-forms>
	
			<!-- 表单提交按钮 -->
			<view class="blue-btn" style="padding-bottom:64rpx;">
				<button type="primary" @click="submit('valiForm')">提交</button>
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageStyles: {
					width: '184rpx',
					height: '176rpx',
					border: {
						radius: '14px'
					},
				},
				showTime: false,
				valiFormData: {
					activityDescription: '',
				},
				imgPath: [],
				imgList: [],
				fileList:[],
				res:{},
				rules: {
					activityDescription: {
						rules: [{
							required: true,
							errorMessage: '活动描述不能为空'
						}]
					},
				},
			}
		},
		onLoad() {

		},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					let activity = this.valiFormData
				// 文件上传
				let uploadTask = uni.uploadFile({
					url: 'http://localhost:8080/具体接口', 
					files: this.fileList,
					formData: {
						'activityDescription':JSON.stringify(activity),
					},
					success: (uploadFileRes) => {
						console.log("success:")	
					},
			
					fail: (res) => {
						console.log("fail:", res)
						}
					})
					
				}).catch(err => {
					console.log('err', err);
			})
				
		},
			
			// 图片展示
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgPath,
					current: e.currentTarget.dataset.url
				});
			},
			//删除图片
			DelImg(e) {
				uni.showModal({
					title: '删除图片',
					content: '确定要删除此图片？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgPath.splice(e.currentTarget.dataset.index, 1)
							this.imgList.splice(e.currentTarget.dataset.index, 1)
							this.fileList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			ChooseImage() {
				uni.chooseImage({
					count: 8, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgPath.length != 0) {
							this.imgPath = this.imgPath.concat(res.tempFilePaths[0])							
						} else {
							// 通过这个在网页中显示图片
							this.imgPath = res.tempFilePaths
						}
						
						// console.log("res.tempFilePaths:", res.tempFilePaths);	// 数组
						console.log(this.imgPath)
						if (this.imgList.length != 0){
							this.imgList = this.imgList.concat(res.tempFiles)
						} else{
							this.imgList = res.tempFiles;
						}				
						console.log(this.imgList)
						
						const files = res.tempFiles;
						for (let i = 0; i < files.length; i++) {
							let obj = new Object();
							obj.name = 'photo'+i;
							obj.uri = files[i].path;
							this.fileList.push(obj);
						}
						console.log("+++++++++++++++"+this.fileList)
					}
				});
			},
		}
	}
</script>


<style lang="scss" scoped>
	
	.main-box {
		background: #fff;
		padding: 0 48rpx;
	}

	.f-box {
		position: relative;

		image {
			position: absolute;
			right: 0;
			bottom: 10rpx;
			width: 48rpx;
			height: 48rpx;
		}
	}
	.user-list{width:100%;display:block;display:flex;align-items: center;flex-wrap: wrap;}
	.user-header-box{
	
		display:flex;
		justify-content: space-between;
		align-items: center;
		width: 46%;
		float: left;
		margin-right: 2%;
		margin-bottom: 28rpx;
		.header-img{
			width: 64rpx;
			height: 64rpx;
			display: block;
			margin-right: 20rpx;
			border-radius:50%;
			overflow:hidden;
			background:#e6e6e6;
		}
	.header-right{
		flex:1;
		.name-box{display:flex;justify-content: space-between;align-items: center;
			.name{
				font-size:24rpx;line-height:28rpx;color: #141420;font-weight: 600;
			}
		}
	   .info-box{display:flex;justify-content: space-between;align-items: center;
	   .info{font-size:22rpx;margin-top:6rpx;color: #9CA5BB;}
	   }
	   .time{font-size:22rpx;line-height:34rpx;bottom:0;right:0;color:#9CA5BB;}
	}
		
	}
    /deep/ .textarea .uni-easyinput__content-textarea {
		min-height: 260rpx;
	}
	/deep/ .add-img .file-picker__box-content.is-add {		
		background:url(@/static/images/add-img.png);
		background-size: cover;
		border: none!important;
	}
	/deep/ .add-img .file-picker__box-content.is-add  .is-add{display:none!important}
</style>

@AutoLog(value = "资料上传")
@ApiOperation(value = "资料上传", notes = "资料上传")
@PostMapping(value = "/upload")
public String addActivity2(String activityDescription, MultipartRequest request) throws IOException {
    for (MultipartFile file : request.getFileMap().values()) {

        String originalFilename = file.getOriginalFilename();
        //截取后缀名
        String suffixName = originalFilename.substring(originalFilename.lastIndexOf("."));
        String uuid = UUID.randomUUID().toString();
        String fileName = uuid + suffixName;
        System.out.println(fileName);
        String filePath = "D:/project/upload/";
        File imgFile = new File(filePath, fileName);
        System.out.println(imgFile.getParentFile());
        if (!imgFile.getParentFile().exists()) {    //不存在文件夹则创建
            imgFile.getParentFile().mkdirs();
        }
        file.transferTo(new File(filePath+fileName));
    }
    return "success";
}

• 上传效果