uniapp-sample-scan/pages/records/list.2vue

<template>
	<div>
		<div v-for="(item, index) in items" :key="item.id" class="item">
			<span>{{ item.name }}</span>
			<button :disabled="uploadingStatus[index]" @click="handleUpload(index)">
				<span v-if="uploadingStatus[index]">上传中...</span>
				<span v-else>上传</span>
			</button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						id: 1,
						name: '文件1'
					},
					{
						id: 2,
						name: '文件2'
					},
					// 其他文件项
				],
				a:0,
				uploadingStatus: [true, false], // 初始化上传状态数组
			};
		},
		methods: {
			handleUpload(index) {
				this.a++
				console.log("aaaaa",this.a)
				console.log(`点击了文件 ${this.items[index].name} 的上传按钮`); // 确认点击事件是否触发

				if (this.uploadingStatus[index]) return; // 如果正在上传中，则直接返回

				this.uploadingStatus[index] = true; // 设置上传中状态
				this.$forceUpdate();

				// 模拟上传请求
				setTimeout(() => {
					// 假设这里是上传成功的情况
					this.uploadingStatus[index] = false; // 恢复按钮可用状态
					this.$forceUpdate();
					console.log(`文件 ${this.items[index].name} 上传成功！`);
				}, 2000); // 这里使用setTimeout模拟后端响应，实际中应替换为实际的后端上传逻辑
			},
		},
	};
</script>