GCLS_Page_Mobile/components/upload-files/upload-files.vue

<template>
	<view class="upload-wrapper">
		<uni-section :title="uploadTitle">
			<view class="example-body">
				<uni-file-picker ref="upload" limit="999" file-mediatype="all" @select="select" :auto-upload="true"
					:disabled="disabled"></uni-file-picker>
			</view>
			<view v-show="file_info_list.length > 0" class="file-wrapper">
				<view v-for="(item, index) in file_info_list" :key="index" class="file-item">
					<view class="file-name" @click="handlePreview(item.file_url)">
						<svg fill="#000000">
							<use xlink:href="#icon-file"></use>
						</svg>
						<text>{{ item.file_name }}</text>
					</view>
					<svg icon-class="delete" @click="deleteFile(item.file_id,index)" :fill="disabled?'#DFDFDF':'#4E5969'">
						<use xlink:href="#icon-deletefile"></use>
					</svg>
				</view>
			</view>
		</uni-section>
	</view>
</template>

<script>
	import {
		fileUpload,
		GetFileStoreInfo
	} from '@/api/api.js';
	const Base64 = require('js-base64').Base64;
	import {
		getConfig
	} from '@/utils/auth';

	export default {
		name: 'upload-files',
		props: {
			fileIdList: {
				type: Array,
				default: () => [],
			},
			filleNumber: {
				type: Number,
				default: 1,
			},
			fileTypeName: {
				type: String,
				default: '文件',
			},
			uploadType: {
				type: String,
				default: '*',
			},
			uploadTitle: {
				type: String,
				default: '',
			},
			disabled: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				file_info_list: [],
			};
		},
		watch: {
			fileIdList: {
				handler(idlst) {
					this.file_info_list = [];
					if (!idlst || idlst.length === 0) return;
					var that = this;
					idlst.forEach(p => {
						GetFileStoreInfo({
							file_id: p
						}).then((res) => {
							that.file_info_list.push(res);
						});
					})
				},
				immediate: true,
			},
		},
		methods: {
			select(e) {
				var files = e.tempFiles.map(p => {
					p.filename = p.name;
					//限制文件大小p.size
					return p;
				})
				this.getFileInfo(files);
			},
			//获取文件
			async getFileInfo(files) {
				var that = this;
				await fileUpload('Mid', files).then((res) => {
					if (res.status === 1) {
						res.file_info_list.forEach(p => {
							that.file_info_list.push(p);
							this.$emit('upload', p.file_id);
						})
					}
				});
				let list_box = document.getElementsByClassName('uni-file-picker__lists');
				if (list_box && list_box.length > 0)
					list_box[0].style.display = "none";
			},
			//预览文件
			handlePreview(url) {
				uni.navigateTo({
					url: '/pages/common/WebViewPreview?path=' + `${Base64.encode(url)}`
				})
			},
			//删除文件
			deleteFile(id, i) {
				if (this.disabled) return;
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否删除当前文件？',
					success: function(res) {
						if (res.confirm) {
							that.$emit('deleteFile', id);
							that.file_info_list.splice(i, 1);
						}
					}
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.upload-wrapper {
		margin-top: 32rpx;

		.file-wrapper {
			display: flex;
			flex-direction: column;

			.file-item {
				display: flex;
				align-items: center;
				margin-top: 16rpx;
			}

			.file-name {
				display: flex;
				align-items: center;
				width: 360px;
				padding: 24rpx 24rpx;
				margin-right: 12px;
				cursor: pointer;
				background-color: $uni-bg-color-grey;
				border-radius: 2px;

				svg {
					flex-shrink: 0;
					margin-right: 12px;
				}
			}

			svg {
				width: 32rpx;
				height: 32rpx;
				color: #000000;
			}
		}
	}

	/deep/ .uni-section {
		.uni-section-header {
			padding: 0;
		}

		.files-button {
			uni-button[type=primary] {
				background-color: $uni-color-main !important;
				border-radius: 0;
				padding: 10rpx 32rpx;
			}
		}
	}
</style>