uniapp＋uview ui 上传图片组件批量提交数据

最新推荐文章于 2024-07-15 15:21:26 发布

supermandp

最新推荐文章于 2024-07-15 15:21:26 发布

阅读量647

点赞数 7

文章标签： uni-app view design css

本文链接：https://blog.csdn.net/supermanwdp/article/details/135601356

版权

文章描述了一个使用前端技术构建的应用，包括质量记录表单的填写，如质损部位、类型、责任方的选择，以及图片的上传功能。开发者展示了如何通过组件（如uni-data-select和uni-upload）实现数据绑定和文件上传操作。

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

<view class="popup_bgox">
			<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
				<view class="popup_box">
					<view
						style="border-radius: 5px;padding: 0 10rpx;box-shadow: 0px 4px 6px #d4d4d4;margin-bottom: 10px;"
						v-for="(item,index) in qualityRecordDetailList" :key="index">
						<view style="display: flex;justify-content:space-between;padding: 10px 0 10px 0;"
							v-if="qualityRecordDetailList.length>1">
							<text>{{index + 1}}</text>
							<u-icon name="close-circle-fill" size="24" @click="DeledePup(index)"></u-icon>
						</view>
						<view class="Is_Hg_box">
							<u-row gutter="0">
								<u-col span="3">质损部位：</u-col>
								<u-col span="9">
									<uni-data-select v-model="item.damagePartId" :localdata="damagePartList">
									</uni-data-select>
								</u-col>
								<u-col span="3">质损类型：</u-col>
								<u-col span="9">
									<uni-data-select v-model="item.damageTypeId" :localdata="damageTypeList">
									</uni-data-select>
								</u-col>
								<u-col span="3">责任方：</u-col>
								<u-col span="9">
									<uni-data-select v-model="item.damageDepartmentId" :localdata="damageDepartmentList">
									</uni-data-select>
								</u-col>
								<u-col span="3">质损原因：</u-col>
								<u-col span="9">
									<uni-data-select v-model="item.damageCauseId" :localdata="damageCauseList">
									</uni-data-select>
								</u-col>
								<u-col span="3">质损环节：</u-col>
								<u-col span="9">
									<uni-data-select v-model="item.damageDiscoverId" :localdata="damageDiscoverList">
									</uni-data-select>
								</u-col>
								<u-col span="12">
									<view class="Is_Hg_box_1">
										<view style="width: 25%;">备&nbsp注：</view>
										<u--textarea v-model="item.memo" placeholder="请输入内容" count :maxlength="200">
										</u--textarea>
									</view>
								</u-col>
							</u-row>
						</view>
						<view class="Is_Hg_box_2">
							<text>上传图片(最多上传5张)</text>
							<view class="up_box">
								<u-upload :fileList="item.fileList" @afterRead="afterRead" @delete="deletePic"
									:name="String(index)" :maxCount="5" :previewFullImage="true"></u-upload>
							</view>
						</view>
					</view>
					<view class="pup_btx_fixed_box">
						<view class="pup_btx_fixed_add" @click="Add_pup">
							+
						</view>
					</view>
					<view class="pup_btx">
						<u-button text="提交"  @click="submit" :loading="ShowLoading" loadingText="提交中" shape="circle"  type="warning">
						</u-button>
					</view>
				</view>
			</u-popup>
		</view>

//绑定数据
qualityRecordDetailList: [{
					damagePartId: '',
					damageTypeId: '',
					damageDepartmentId: '',
					damageCauseId: '',
					damageDiscoverId: '',
					memo: '',
					fileList: [],
					pictureList: []
				}],

            // 添加质损登记
			Add_pup() {
				this.qualityRecordDetailList.push({
					damagePartId: '',
					damageTypeId: '',
					damageDepartmentId: '',
					damageCauseId: '',
					damageDiscoverId: '',
					memo: '',
					fileList: [],
					pictureList: []
				})
			},
            // 删除图片
			deletePic(event) {
				let itx = Number(event.name);
				this.qualityRecordDetailList[itx][`fileList`].splice(event.index, 1);
				this.imagelist.splice(event.index, 1);
				this.qualityRecordDetailList[itx].pictureList.splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				let Signindex = Number(event.name);
				let lists = [].concat(event.file);
				let fileListLen = this.qualityRecordDetailList[Signindex][`fileList`].length;
				lists.map((item) => {
					this.qualityRecordDetailList[Signindex][`fileList`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url, event.name)
					let item = this.qualityRecordDetailList[Signindex][`fileList`][fileListLen]
					this.qualityRecordDetailList[Signindex][`fileList`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			// 上传图片
			uploadFilePromise(url, index) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.baseUrl + '/file/upload',
						header: this.urlheader,
						filePath: url,
						name: 'file',
						success: (res) => {
							let imagedata = JSON.parse(res.data)
							this.imagelist.push(imagedata.data.url);					           
                this.qualityRecordDetailList[index].pictureList.push(imagedata.data.url);
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},