uniapp + uview 多图上传

<view class="upload-img">
							<u-form-item label-width="150">
								<u-upload ref="iupload" :style="{opacity: evaluationData.length > 6 ? 0 : ''}"
									width="150" height="150" :file-list="multipleImgs"
									:action="httpUrl + '/common/uploadFile'" :customBtn="true" upload-text="上传图片"
									:header="importHeaders" :max-count="6" :form-data="formData"
									@on-success="onSuccessFn" :show-progress="false" delBgColor="#241e1a"
									@on-remove="deleteImgs" @on-error="onErrorFn" :before-upload="beforeUpload">
									<view class="upload-icon" slot="addBtn">
										<view class="disflex-center">
											<view class="domeimg">
												<u-icon custom-prefix="custom-icon" name="tupian" size="64"
													color="#ffffff">
												</u-icon>
											</view>
											<view class="upload-text">上传图片</view>
										</view>
									</view>
								</u-upload>
							</u-form-item>
						</view>
.upload-img {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 12rpx;

			.viewimg {
				// flex-grow: 1;
				width: 140rpx;
				height: 140rpx;
				border: 2rpx solid $color-font-1;
				// flex: 1 0 21%; /* explanation below */
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
				margin-bottom: 20rpx;

				position: relative::v-deep {
					.u-image {
						border-radius: 20rpx !important;

						.u-image__image {
							border-radius: 20rpx !important;
						}
					}
				}

				.delete-picture {
					background-color: rgba($color: #000000, $alpha: 0.6);
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.upload-icon {
				width: 150rpx;
				height: 150rpx;
				background: #241E1A;
				// border: 2rpx solid $color-font-1;
				border-radius: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.disflex-center {
					.domeimg {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 20rpx;
					}

					.upload-text {
						margin-top: 8rpx;
						font-size: 26rpx;
						letter-spacing: 2rpx;
						color: #F2F2F2;
					}
				}
			}
		}
data() {
			return {
				httpUrl: API_URL,
				importHeaders: {
					Authorization: uni.getStorageSync('_TOKEN')
				},
				formData: {
					type: 9
				},
				evaluationData: [], //存储的数组
				multipleImgs: [],//展示的数组
				tips: '请输入高度',
				tipsWidth: '请输入宽度',
				shts: false,
				shtsWidth: false,
				value: '',
				valueWidth: ''
			};
		},
		//删除图片
			deleteImgs(index, lists, name) {
				console.log(index, "index")
				console.log(lists, "lists")
				console.log(name, "name")
				this.evaluationData.splice(index, 1);
				lists.splice(index, 1);
			},
			beforeUpload() {
				this.$refs.iupload.clear
				this.$emit('uploadLoadingStart')
			},
			onSuccessFn(data, index, lists, name) {
				const _this = this
				console.log(data)
				_this.evaluationData.push(data.data);
				let a = setTimeout(() => {
					_this.$emit('uploadLoadingEnd');
					clearTimeout(a)
				}, 500)
			},
			onErrorFn(res, index, lists, name) {
				this.$emit('uploadLoadingEnd')
				uni.showToast({
					title: '上传失败,请稍后再试',
					icon: 'none',
					duration: 2000
				});
			}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值