jnpf-app-vue3-v6x/components/Jnpf/UploadFileH/index.vue

<template>
	<view class="jnpf-file">
		<view class="jnpf-file-box" :style="{textAlign:align}">
			<u-button size="mini" type="primary" v-if="!detailed &&!disabled " class="jnpf-file-box-line"
				@click="chooseFile">{{buttonText}}</u-button>
			<u-button size="mini" v-if="disabled" class="jnpf-file-disabled">{{buttonText}}</u-button>
			<view v-for='(item,index) in fileList' :key="index" class="jnpf-file-item u-type-primary u-flex u-line-1"
				@tap='downLoad(item)'>
				<view class="jnpf-file-item-txt u-line-1" v-if="item.fileSize">
					{{item.name+'（'+`${jnpf.toFileSize(item.fileSize)}`+' ）'}}
				</view>
				<view class="jnpf-file-item-txt u-line-1" v-else>{{item.name}}</view>
				<view class="closeBox u-flex-col" @click.stop="delFile(index)" v-if="!detailed && !disabled">
					<text class="icon-ym icon-ym-nav-close closeTxt u-flex"></text>
				</view>
			</view>
			<view class="tipText u-p-l-20">
				{{tipText}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDownloadUrl
	} from '@/api/common'
	import jnpf from '@/utils/jnpf'
	const units = {
		KB: 1024,
		MB: 1024 * 1024,
		GB: 1024 * 1024 * 1024,
	};
	const imgTypeList = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
	export default {
		name: 'jnpf-upload-img',
		inheritAttrs: false,
		props: {
			modelValue: {
				type: Array,
				default: () => ([])
			},
			disabled: {
				type: Boolean,
				default: false
			},
			limit: {
				type: [Number, String],
				default: 2
			},
			fileSize: {
				type: Number,
				default: 5
			},
			sizeUnit: {
				type: String,
				default: 'MB'
			},
			accept: {
				type: String,
				default: ''
			},
			pathType: {
				type: String,
				default: 'defaultPath'
			},
			tipText: {
				type: String,
				default: ''
			},
			isAccount: {
				type: Number,
				default: 0
			},
			folder: {
				type: String,
				default: ''
			},
			vModel: {
				type: String,
				default: ''
			},
			detailed: {
				type: Boolean,
				default: false
			},
			align: {
				type: String,
				default: 'right'
			},
			sortRule: {
				type: Array,
				default: () => ([])
			},
			timeFormat: {
				type: String,
				default: ''
			},
			buttonText: {
				type: String,
				default: '点击上传'
			}
		},
		data() {
			return {
				percent: '',
				fileList: [],
				// 上传接口参数
				option: {},
				params: {
					pathType: this.pathType,
					isAccount: this.isAccount,
					folder: this.folder,
					sortRule: (this.sortRule || []).join(),
					timeFormat: this.timeFormat,
				},
				// 选择文件后是否立即自动上传，true=选择后立即上传
				instantly: true,
				size: 30,
				list: [],
				deletable: false,
				childId: 'upload' + this.$u.guid(3, false, 2),
				lsjUpload: 'lsjUpload' + this.$u.guid(3, false, 2),
				width: '140rpx',
				height: '70rpx',
			}
		},
		computed: {
			baseURL() {
				return this.define.baseURL
			},
			getFormats() {
				let formats = this.accept
				formats = formats.replace("image/*", 'png,jpg,jpeg,bmp,gif,webp,psd,svg,tiff')
				formats = formats.replace("video/*", 'avi,wmv,mpg,mpeg,mov,rm,ram,swf,flv,mp4,wma,rm,rmvb,flv,mpg,mkv')
				formats = formats.replace("audio/*", 'mp3,wav,aif,midi,m4a')
				return formats
			},
		},
		created() {
			const token = uni.getStorageSync('token')
			this.option = {
				url: this.baseURL + '/api/file/Uploader/annex',
				name: 'file',
				header: {
					'Authorization': token,
					'uid': '27682',
					'client': 'app',
					'accountid': 'DP',
				},
				data: this.params
			}
		},
		watch: {
			modelValue: {
				handler(val) {
					this.fileList = JSON.parse(JSON.stringify(val));
				},
				immediate: true
			}
		},
		methods: {
			chooseFile() {
				if (this.limit === this.fileList.length) return this.toast(`只允许上传${this.limit}个文件`);
				uni.chooseFile({
					count: 1, //默认100
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						const token = uni.getStorageSync('token')
						const file = res.tempFiles[0]
						// 限制文件大小
						if (file.size > units[this.sizeUnit] * Math.abs(this.fileSize)) {
							this.toast(`文件大小超过${this.fileSize}${this.sizeUnit}`)
							return;
						}
						uni.uploadFile({
							url: this.baseURL + '/api/file/Uploader/annex',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							header: {
								'Authorization': token,
								'uid': '27682',
								'client': 'app',
								'accountid': 'DP',
							},
							success: (response) => {
								let item = JSON.parse(response.data)
								this.fileList.push({
									name: res.tempFiles[0].name,
									fileId: item.data.name,
									url: item.data.url,
									fileExtension: item.data.fileExtension,
									fileSize: item.data.fileSize
								})
								this.$emit('update:modelValue', this.fileList)
								this.$emit('change', this.fileList)
							}
						});
					}
				});
			},
			downLoad(item) {
				getDownloadUrl('annex', item.fileId).then(res => {
					this.downloadFile(res.data.url, item.name);
				})
			},
			downloadFile(url, name) {
				uni.downloadFile({
					url: `${this.baseURL}${url}&name=${name}`,
					success: res => {
						if (res.statusCode === 200) {
							var filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success: (res) => {
									uni.showToast({
										title: '打开文档成功'
									})
								}
							});
						}
					}
				});
			},
			// 移除某个文件
			delFile(index) {
				console.log(index);
				uni.showModal({
					title: '提示',
					content: '是否删除该文件？',
					success: res => {
						if (res.confirm) {
							this.fileList.splice(index, 1)
							this.$emit('update:modelValue', this.fileList)
							this.$emit('change', this.fileList)
							this.fileList.length >= this.fileCount ? this.deletable = true : this.deletable =
								false
						} else if (res.cancel) {}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.jnpf-file {
		width: 100%;

		.jnpf-file-box {

			.jnpf-file-box-line {
				height: 70rpx;
			}

			.tipText {
				color: #606266;
				word-break: break-all;
				line-height: 48rpx;
			}

			.jnpf-file-item {
				justify-content: space-between;
				flex-direction: row;

				.jnpf-file-item-txt {
					width: 230rpx;
					flex: auto;
				}

				.showLeft {
					text-align: left;
				}

				.closeBox {
					height: 60rpx;
					align-items: flex-end;
					justify-content: space-evenly;
					flex: 0.2;

					.closeTxt {
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
						background-color: #fa3534;
						color: #FFFFFF;
						font-size: 20rpx;
						align-items: center;
						justify-content: center;
						line-height: 36rpx;
					}
				}
			}
		}

		.jnpf-file-disabled {
			background-color: #E6E6E6 !important;
			border-color: #D9D9D9 !important;
			color: #9B9B9B !important;
		}
	}
</style>