jnpf-app-vue3/pages/workFlow/comment/comment-file/lsj-upload/lsj-upload.vue

<template>
	<view class="lsj-file" :style="[getStyles]">
		<view ref="lsj" class="hFile" :style="[getStyles]" @click="onClick">
			<slot>
				<view class="defview" :style="[getStyles]">附件上传</view>
			</slot>
		</view>
	</view>
</template>

<script>
	// 查看文档：https://ext.dcloud.net.cn/plugin?id=5459
	import {
		LsjFile
	} from './LsjFile.js'
	export default {
		name: 'comment-Lsj-upload',
		props: {
			currentCount: {
				type: Number,
				default: 0
			},
			// 打印日志
			debug: {
				type: Boolean,
				default: false
			},
			// 自动上传
			instantly: {
				type: Boolean,
				default: false
			},
			// 上传接口参数设置
			option: {
				type: Object,
				default: () => {}
			},
			// 文件大小上限
			size: {
				type: Number,
				default: 10
			},
			// 文件选择个数上限,超出后不触发点击
			count: {
				type: Number,
				default: 2000
			},
			// 是否允许多选文件
			multiple: {
				type: Boolean,
				default: true
			},
			// 允许上传的文件格式（多个以逗号隔开）
			formats: {
				type: String,
				default: ''
			},
			// input file选择限制
			accept: {
				type: String,
				default: ''
			},
			// 微信选择文件类型
			//all=从所有文件选择，
			//video=只能选择视频文件，
			//image=只能选择图片文件，
			//file=可以选择除了图片和视频之外的其它的文件
			wxFileType: {
				type: String,
				default: 'all'
			},
			// webviewID需唯一，不同窗口也不要同Id
			childId: {
				type: String,
				default: 'lsjUpload'
			},
			// 文件选择触发面宽度
			width: {
				type: String,
				default: '100%'
			},
			// 文件选择触发面高度
			height: {
				type: String,
				default: '80rpx'
			},

			// top,left,bottom,right仅position=absolute时才需要传入
			top: {
				type: [String, Number],
				default: ''
			},
			left: {
				type: [String, Number],
				default: ''
			},
			bottom: {
				type: [String, Number],
				default: ''
			},
			right: {
				type: [String, Number],
				default: ''
			},
			// nvue不支持跟随窗口滚动
			position: {
				type: String,
				// #ifdef APP-NVUE
				default: 'absolute',
				// #endif
				// #ifndef APP-NVUE
				default: 'static',
				// #endif
			},
		},
		data() {
			return {

			}
		},
		watch: {
			option(v) {
				// #ifdef APP-PLUS
				this.lsjFile && this.show();
				// #endif
			}
		},
		updated() {
			// #ifdef APP-PLUS
			if (this.isShow) {
				this.lsjFile && this.show();
			}
			// #endif
		},
		computed: {
			getStyles() {
				let styles = {
					width: this.width,
					height: this.height
				}
				if (this.position == 'absolute') {
					styles['top'] = this.top
					styles['bottom'] = this.bottom
					styles['left'] = this.left
					styles['right'] = this.right
					styles['position'] = 'fixed'
				}

				return styles
			}
		},
		mounted() {
			this._size = 0;
			let WEBID = this.childId + new Date().getTime();
			this.lsjFile = new LsjFile({
				id: WEBID,
				debug: this.debug,
				width: this.width,
				height: this.height,
				option: this.option,
				instantly: this.instantly,
				// 限制条件
				prohibited: {
					// 大小
					size: this.size,
					// 允许上传的格式
					formats: this.formats,
					// 限制选择的格式
					accept: this.accept,
					count: this.count,
					// 是否多选
					multiple: this.multiple,
				},
				onchange: this.onchange,
				onprogress: this.onprogress,
			});
			this.create();
			// 需判断是否当前页显示
			uni.$on('lsjShow', this.show);
		},
		beforeDestroy() {
			uni.$off('lsjShow', this.show);

			// #ifdef APP-PLUS
			this.lsjFile.dom.close();
			// #endif
		},
		methods: {
			setFiles(array) {
				if (array instanceof Map) {
					for (let [key, item] of array) {
						item['progress'] = 100;
						item['type'] = 'success';
						this.lsjFile.files.set(key, item);
					}
				} else if (Array.isArray(array)) {
					array.forEach(item => {
						if (item.name) {
							item['progress'] = 100;
							item['type'] = 'success';
							this.lsjFile.files.set(item.name, item);
						}
					});
				}
				this.onchange(this.lsjFile.files);
			},
			setData() {
				this.lsjFile && this.lsjFile.setData(...arguments);
			},
			getDomStyles(callback) {
				// #ifndef APP-NVUE
				let view = uni
					.createSelectorQuery()
					.in(this)
					.select('.lsj-file')
				view.fields({
						size: true,
						rect: true
					},
					({
						height,
						width,
						top,
						left,
						right,
						bottom
					}) => {
						uni.createSelectorQuery()
							.selectViewport()
							.scrollOffset(({
								scrollTop
							}) => {
								return callback({
									top: parseInt(top) + parseInt(scrollTop) + 'px',
									left: parseInt(left) + 'px',
									width: parseInt(width) + 'px',
									height: parseInt(height) + 'px'
								})
							})
							.exec()
					}
				).exec()
				// #endif
				// #ifdef APP-NVUE
				const dom = weex.requireModule('dom')
				dom.getComponentRect(this.$refs.lsj, ({
					size: {
						height,
						width,
						top,
						left,
						right,
						bottom
					}
				}) => {
					return callback({
						top: parseInt(top) + 'px',
						left: parseInt(left) + 'px',
						width: parseInt(width) + 'px',
						height: parseInt(height) + 'px',
						right: parseInt(right) + 'px',
						bottom: parseInt(bottom) + 'px'
					})
				})
				// #endif
			},
			show() {
				if (this._size && (this._size >= this.count)) {
					return;
				}
				this.isShow = true;
				// #ifdef APP-PLUS
				this.lsjFile && this.getDomStyles(styles => {
					this.lsjFile.dom.setStyle(styles)
				});
				// #endif
				// #ifdef H5
				this.lsjFile.dom.style.display = 'inline'
				// #endif
			},
			hide() {
				this.isShow = false;
				// #ifdef APP-PLUS
				this.lsjFile && this.lsjFile.dom.setStyle({
					top: '-100px',
					left: '0px',
					width: '1px',
					height: '100px',
				});
				// #endif
				// #ifdef H5
				this.lsjFile.dom.style.display = 'none'
				// #endif
			},
			/**
			 * 手动提交上传
			 * @param {string}name 文件名称，不传则上传所有type等于waiting和fail的文件
			 */
			upload(name) {
				this.lsjFile && this.lsjFile.upload(name);
			},
			/**
			 * @returns {Map} 已选择的文件Map集
			 */
			onchange(files) {
				// this.$emit('change',files);
				this._size = files.size;
				return files.size >= this.count ? this.hide() : this.show();
			},
			/**
			 * @returns {object} 当前上传中的对象
			 */
			onprogress(item, end = false) {
				this.$emit('progress', item);
				if (end) {
					setTimeout(() => {
						this.$emit('uploadEnd', item);
					}, 0);
				}
			},
			/**
			 * 移除组件内缓存的某条数据
			 * @param {string}name 文件名称,不指定默认清除所有文件
			 */
			clear(name) {
				this.lsjFile.clear(name);
			},
			// 创建选择器
			create() {
				// 若iOS端服务端处理不了跨域就将hybrid目录内的html放到服务端去，并将此处path改成服务器上的地址
				let path = '/uni_modules/lsj-upload/hybrid/html/uploadFile.html?sourceflag=comment';
				let dom = this.lsjFile.create(path);
				// #ifdef H5
				this.$refs.lsj.$el.appendChild(dom);
				// #endif
				// #ifndef APP-PLUS
				this.show();
				// #endif
				// #ifdef APP-PLUS
				dom.setStyle({
					position: this.position
				});
				dom.loadURL(path);
				setTimeout(() => {
					// #ifdef APP-NVUE
					plus.webview.currentWebview().append(dom);
					// #endif
					// #ifndef APP-NVUE
					this.$root.$scope.$getAppWebview().append(dom);
					// #endif
					this.show();
				}, 300)
				// #endif
			},
			// 点击选择附件
			onClick() {
				/*if (this.currentCount >= 9) {
					this.toast(`最多可以上传9个文件`);
					return;
				}*/

				// #ifdef MP-WEIXIN
				if (!this.isShow) {
					return;
				}
				let count = this.count - this._size;
				this.lsjFile.chooseMessageFile(this.wxFileType, count);
				// #endif
			},
			toast(msg) {
				uni.showToast({
					title: msg,
					icon: 'none'
				});
			}
		}
	}
</script>

<style scoped>
	.lsj-file {
		display: inline-block;
	}

	.defview {
		background-color: #007aff;
		color: #fff;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	.hFile {
		position: relative;
		overflow: hidden;
	}
</style>