效果图

 使用的插件链接:附件上传选择vue内嵌版lsj-upload – DCloud 插件市场

app端使用这个插件有点问题，所以把上传功能写到了一个跳转的页面才能触发上传功能

H5端不会有这个问题

示例代码

//附件页
<template>
	<view class="list1-con-t">																																
		<view class="fu">
			<view class="fulist" v-for="(item,index) in fuList" :key="item.id" @click="fuBtn(item)">
				<view class="" >
					{
  {item.originFileName}}
				</view>
				<view class="" @click.stop="delUserInfoAnnex(item)">
					<u-icon name="close-circle"></u-icon>
				</view>
			</view>
		</view>
		<view class="btn" @click="accessory">
			上传附件
		</view>						
	</view>	
</template>

<script>
export default {
	data() {
		return {	
            userId:'',		
			fuList: [],
		}
	},	
	onLoad(options) {
		this.userId = options.userId		
	},
	methods: {		
		// 点击附件预览
			fuBtn(e) {
				console.log('点击附件',e);				
				this.viewFile(e.filePath)
			},
			// 删除附件
			delUserInfoAnnex(e) {				
				this.$api.delUserInfoAnnex(e.id).then(res => {
					console.log('删除',res);
					this.getAnnexList(e.userID)
				})
				
			},
			viewFile(e) {
				uni.downloadFile({
				  url: this.baseUrl + e,
				  success: function (res) {
				    var filePath = res.tempFilePath;
					console.log(res);
				    uni.openDocument({
				      filePath: filePath,
				      showMenu: true,
				      success: function (res) {
				        console.log('打开文档成功');
				      }
				    });
				  }
				});
			}		
	}
}
</script>

<style>
	
</style>

//上传附件页
<template>
	<view class="content">				
		<view class="main">
			<lsj-upload
			ref="lsjUpload"
			width="100px"
			height="80rpx"
			childId="upload"
			:size="10"
			v-model="percent"
			@input="onInput"								
			@callback="onCallback">
			    <view class="btn" style="height: 80rpx;">选择附件上传</view>
			</lsj-upload>
		</view>		
	</view>
</template>

<script>
export default {
	data() {
		return {			
			percent: '',
			userId: ''
		}
	},
	onReady() {
		// 初始化参数并创建上传DOM
		this.onCreate();
	},
	onLoad(options) {
		this.userId = options.userId		
	},
	methods: {		
		onCreate() {
			console.log('初始化附件插件');
			// 初始化参数并创建上传DOM
			this.$refs.lsjUpload.create({
				// #ifdef APP-PLUS
				cuWebview: this.$mp.page.$getAppWebview(), // app必传
				// #endif
				url: '', //替换为你的接口地址
				name: 'file', // 附件key
				size: 10, // 附件上传大小上限(M)，默认10M
				debug: true,
				//根据你接口需求自定义请求头
				header: {
					'Authorization': `token`
				},
				//根据你接口需求自定义body参数
				formData: {
					'orderId': 1000
				}
			});
		},
		onInput(e) {
			console.log('上传进度',e);
		},
		onCallback(e) {
			consoel.log('上传结果',e)			
		},		
	}
}
</script>

<style>
	.content {
		width: 100%;
		height: 500px;
		position: relative;
	}
	.main {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%);
	}
	.btn {
		height: 80rpx;
		background-color: #007AFF;
		color: #fff;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}	
</style>

记录一下实用的功能