RMYY_CallCenter_UI/CallCenterWe.../RMYYAPP/pages/components/upload/uploadFile.vue

<template>
	<view class="wrapper" style="background-color: #fff;">
		<view class="form" style="margin-left: -10px;">
			<lsj-upload ref="lsjUpload" childId="upload" :option="option" 
				:debug="true" :instantly="true" @progress="onprogress" @change="onChange">
				<button class="mini-btn" type="primary" size="mini">选择附件</button>
			</lsj-upload>
			<view v-if="fileUrlList" v-for="(item,index) in fileUrlList" :key="index" style="padding: 7px 13px;border: 1px solid rgb(238,238,238);color: rgb(102,102,102);">
				<text style="width: 80%;display: inline-block;word-break: break-all">{{item.name}}</text>
				<text @click="clear(item.id,item.name)"	style="margin-left: 10rpx;padding: 0 10rpx;float: right;">X</text>
			</view>
			<!-- #ifndef MP-WEIXIN -->
			
			<view v-for="(item,index) in files.values()" :key="'i' + index" style="padding: 7px 13px;border: 1px solid rgb(238,238,238);color: rgb(102,102,102);">
				<text style="width: 80%;display: inline-block;word-break: break-all">{{item.name}}</text>
				<text @click="clear(JSON.parse(item.responseText).data[0].F_FileId,item.name)"	style="margin-left: 10rpx;padding: 0 10rpx;float: right;">X</text>
			</view>
			<!-- #endif -->
		</view>

		</view>
	</view>
</template>

<script>
	import indexConfig from '@/config/index.config';
	export default {
		data() {
			return {
				fileIdList: [],
				option: {
					url: indexConfig.baseUrl + "/FaultRepair/UploadFile",
					name: 'file',
					header: {
						Authorization: uni.getStorageSync('Admin-Token')
					}
				},
				files: new Map(),
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				wxFiles: [],
			}
		},
		props: {
			fileUrlList: {
				type: Array
			} 
		},
		watch: {
			'fileUrlList': function(){
				this.fileUrlList.forEach((v,n) => {
					this.fileIdList.push(v.id)
				})
			}
		},
		onLoad() {
		},
		methods: {
			// 上传进度回调
			onprogress(item) {
				// 更新当前状态变化的文件
				this.files.set(item.name, item);
				if(item.type == 'success') {
					this.fileIdList.push(JSON.parse(item.responseText).data[0].F_FileId)
					this.getImgData(this.fileIdList)
				}
				console.log(typeof(this.files.values()))
				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif
				// 强制更新视图
				this.$forceUpdate();
			},
			getImgData(data){
				let newdata = data.filter(function(item,index) {
					return data.indexOf(item) === index
				})
				this.$emit('post-string-data',newdata)
			},
			// 文件选择回调
			onChange(files) {
				// 更新选择的文件
				this.files = files;
				// 强制更新视图
				this.$forceUpdate();

				// 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
				// #ifdef MP-WEIXIN
				this.wxFiles = [...this.files.values()];
				// #endif
			},
			// 手动上传
			upload() {
				// name=指定文件名，不指定则上传所有type等于waiting和fail的文件
				this.$refs.lsjUpload.upload();
			},
			// 移除某个文件
			clear(data,name) {
				this.fileIdList.forEach((v,n) => {
					if(data === v) {
						this.fileUrlList.splice(n,1)
						this.fileIdList.splice(n,1)
					}
				})
				this.getImgData(this.fileIdList)
				// name=指定文件名，不传name默认移除所有文件
				this.$refs.lsjUpload.clear(name);
			},
			// 打开nvue窗口
			open() {
				uni.navigateTo({
					url: '/pages/nvue-demo/nvue-demo'
				});
			}
		}
	}
</script>

<style>
	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text {
		font-size: 14px;
		color: #333;
	}

	.item__label {
		display: flex;
		flex-shrink: 0;
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
		width: 65px;
		padding: 5px 0;
		height: 36px;
		width: 70px;
		justify-content: flex-start;
		float: left;
	}
</style>