Element-ui之upload封装

最新推荐文章于 2023-12-06 09:02:22 发布

言_青

最新推荐文章于 2023-12-06 09:02:22 发布

阅读量2.2k

点赞数 2

分类专栏： Vue 文章标签： vue js

本文链接：https://blog.csdn.net/weixin_44134899/article/details/103856547

版权

Vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

二次封装el-upload组件，以便使用。

包含两个部分：创建、引用。

说明：
1. 包含：组件本身有的各种属性控制、是否拖拽、扩展按钮、上传前的各种校验（图片的话需要压缩，压缩方法在之前的文章有，这里不再重复写）、预览附件（这里支持pdf和图片预览，支持Excel下载，word没写，原理应该和Excel一样，其余的暂不支持）等。
2. 各个属性灵活运用，也可自己添加、更改相关属性配置。
3. 这里设置从父组件中传输过来的对象和数组都用JSON串接收，目的是为了方便监听数值变化。
4. 代码为手写，已检查，但不保证没有单词写错，如报错，请检查一下单词的拼写。

一、创建封装文件 - comUpload.vue:

<template>
	<div>
		<el-upload
			ref="comUpload"
			:class="{ 'is-drag': drag }"
			:drag="drag"
			:accept="accept"
			:action="action"
			:multiple="multiple"
			:disabled="disabled"
			:limit="limit"
			:file-list="fileList"
			:on-preview="onPreview"
			:on-remove="onRemove"
			:on-success="onSuccess"
			:before-upload="beforeUpload"
			:before-remove="beforeRemove"
			:on-exceed="onExceed"
			:on-progress="onProgress"
			:on-error="onError"
			:data="data"
		>
			<i v-if="drag" class="el-icon-upload"></i>
			<div v-if="drag" class="el-upload_text">
				将文件拖到此处，或<em>点击上传</em>
			</div>
			<el-button v-if="!drag" slot="trigger" size="small" type="primary">点击上传</el-button>
			
			<!-- 扩展按钮 -->
			<template v-if="buttonList">
				<el-button
					v-for="itemB in buttonList"
					:key="itemB.id"
					style="margin-left: 10px;"
					size="small"
					:type="itemB.type"
					@click="buttonClick(itemB)"
				>{{ itemB.label }}</el-button>
			</template>

			<!-- 提示语 -->
			<div slot="tip" class="el-upload_tip">
				<span v-if="acceptText">只能上传{{ acceptText }}文件</span>
				<span v-if="acceptText && limit">，</span>
				<span v-if="limit">最多上传{{ limit }}个</span>
				<span v-if="(limit && size) || (acceptText && size)">，</span>
				<span v-if="size">每个文件不超过{{ size }}MB</span>
				<p v-if="tips" class="el-upload__tip_tips">{{ tips }}</p>
			</div>
		</el-upload>

		<!-- pdf预览组件，前篇文章已有介绍 -->
		<com-pdf-show ref="comPdfShowRef"></com-pdf-show>

		<!-- 图片预览组件，由el-dialog全屏展示，img标签展示，没什么技术含量，这里就不写了 -->
		<com-img-show ref="comImgShowRef"></com-img-show>
	</div>
</template>
<script>
	import comImgShow from './comImgShow';
	import comPdfShow from './comPdfShow';

	export default {
		name: 'ComUpload',
		components: { comImgShow, comPdfShow },
		props: {
			multiple: { // 是否可以上传多个，默认true，非必传
				type: Boolean,
				default: true,
			},
			drag: { // 是否可拖拽，默认false，非必传
				type: Boolean,
				default: false,
			},
			accept: { // 上传文件的格式限制，默认不限制，非必传
				type: String,
				default: '',
			},
			accepts: { // 当drag为true时，accept设置的话拖拽无效，故加此属性限制文件格式，在上传前校验；默认不限制，非必传
				type: String,
				default: '',
			},
			acceptText: String, // 上传文件格式限制文字说明，放入提示语中用来展示；默认空，非必传。
			action: { // 上传文件地址，默认'/upload'；非必传
				type: String,
				default: '/upload',
			},
			disabled: { // 是否禁用，默认false；非必传
				type: Boolean,
				default: false,
			},
			limit: Number, // 最大允许上传个数，默认不限制，非必传
			size: Number, // 最大允许上传文件大小，单位为MB，默认不限制，非必传
			initFiles: String, // 初始化附件数据数组JSON串，默认空，非必传
			paramsData: String, // 上传文件时附带的额外参数对象JSON串，默认空，非必传
			buttons: String, // 额外按钮数组JSON串，默认空，非必传
			tips: String, // 额外需添加的提示语，默认空，非必传
		},
		data() {
			return {
				fileList: [],
				data: {},
				buttonList: [],
			};
		},
		watch: {
			initFiles() {
				if (this.initFiles) this.fileList = JSON.parse(this.initFiles)
			},
			buttons() {
				this.buttonList = this.buttons ? JSON.parse(this.buttons) : [];
			},
			paramsData() {
				this.data = this.paramsData ? JSON.parse(this.paramsData) : {}
			},
		},
		created() {
			this.data = this.paramsData ? JSON.parse(this.paramsData) : {}

			if (this.initFiles) this.fileList = JSON.parse(this.initFiles);

			this.buttonList = this.buttons ? JSON.parse(this.buttons) : [];
		},
		methods: {
			/**
			* 点击额外按钮触发
			* @buttonInfo {Object} 按钮信息
			**/
			buttonClick(buttonInfo) {
				this.$emit('buttonClick', buttonInfo);
			},
			/**
			* 预览文件，暂时只支持预览图片和pdf，预览Excel是以下载的方式，word没有写，应该和Excel原理一样，其他不支持
			* @file {File} 附件信息
			**/
			onPreview(file) {
				let acceptType = this.accepts || this.accept;
				let isImg = acceptType.match('image/');
				let isPdf = acceptType.match('application/pdf');
				
				let excelAccept = 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
				let isExcel = excelAccept.match(acceptType)
				if (isImg) {
					// 预览图片，调用图片预览组件展示图片；如果有本地文件，则直接展示本地文件，否则，根据fileId获取服务器上的文件后进行展示
					if (file.raw) {
						this.$refs.comImgShowRef.getmgUrl(file.raw, file.name)
					} else {
						this.axios.post('/getFile', { fileId: file.fileId }).then(res => {
							this.$refs.comImgShowRef.previewPDF(res, file.name)
						})
					}
				} else if (isPdf) {
					// 预览pdf，如果有本地文件，则直接展示本地文件，否则，根据fileId获取服务器上的文件后进行展示
					if (file.raw) {
						this.$refs.comPdfShowRef.previewPDF(file.raw, '02')
					} else {
						this.axios.post('/getFile', { fileId: file.fileId }).then(res => {
							this.$refs.comPdfShowRef.previewPDF(res)
						})
						
					}
				} else if (isExcel) {
					// 预览Excel，仅支持查看非当前上传行为的Excel预览（因预览是以下载的模式预览的，这里认为当前上传的文件再次下载没有意义）。
					if (file.fileId) {
						this.downloadExcel(file.fileId, file.name)
					}
				}
			},
			/**
			* 下载Excel表
			* @fileId {String} 文件id
			* @name {String} 文件名
			**/
			downloadExcel(fileId, name) {
				// 根据fileId请求服务获取Excel流，将流进行整理后下载下来
				this.axios.post('/getxcel', { fileId }).then( res => {
					// 调用公共方法，下载文件；【此公共方法是写在全局的，通用的，现将公共方法写在下面】
					this.downloadFile(res, name)
				})
			},
			/**
			* 通过文件流下载文件
			* @file 文件流，必输
			* @name 下载的文件名，必输
			* @type 下载的文件类型，默认xls，非必输
			**/
			downloadFile(file, name, type) {
				if (!file) {
					return
				}
				const url = window.URL.createObjectURL(
					new Blob([file], { 
						type: type || 'application/vnd.ms-excel' 
					})
				);
				const link = document.createElement('a');
				link.style.display = 'none';
				link.href = url;
				// 设置文件名；download属性定义了下载链接的地址而不是跳转路径
				link.setAttribute('download', name);
				document.body.appendChild(link);
				link.click();
				document.body.removeChild(link); // 下载完成后移除元素
				window.URL.revokeObjectURL(url); // 释放掉blob对象
			},
			/**
			* 删除文件的钩子
			* @file {File} 删除的文件信息
			* @fileList {Array} 删除后的文件列表
			**/
			onRemove(file, fileList) {
				this.fileList = fileList;
				this.$emit('fileChange', fileList)
				this.$emit('fileRemove', file)
			},
			/**
			* 上传成功的钩子
			* @response {Object} 上传成功后服务返回的数据
			* @file {File} 上传的文件信息
			* @fileList {Array} 上传后的文件列表
			**/
			onSuccess(response, file, fileList) {
				if (response.code != 'SUCCESS') {
					console.log(response.message || '文件上传报错')
					// 删除报错文件
					this.$refs.comUpload.abort(file.raw);
					fileList.splice(fileList.indexOf(file), 1);
					this.onRemove(file, fileList);
					return;
				}

				this.fileList = fileList
				this.$emit('fileChange', fileList)
				this.$emit('fileAdd', file);
			},
			/**
			* 上传文件之前的钩子，用于做校验文件等一系列操作，压缩图片操作在以前的文章中讲过了，这里就略过不写了
			* @file {File} 文件本身
			**/
			beforeUpload(file) {
				let _this = this
				return new Promise((resolve, reject) => {
					if (file.size === 0) { // 如果检测不到文件大小，报错
						console.log('文件错误，请上传正确的文件')
						reject()
					}
					// 判断文件是否超过限制大小
					let isLtSize = _this.size 
						? file.size / 1024 / 1024 < _this.size 
							? true 
							: false 
						:true 
					if (!isLtSize) {
						console.log(`文件大小超过限制，最大不超过${_this.size}MB`)
						reject()
					}
					
					// 判断文件是否符合要求的格式
					let acceptType = _this.accepts || _this.accept;
					let extension = acceptType 
						? acceptType.match(file.type)
							? true
							: false
						: true
					if (!extension) {
						console.log(`文件格式错误，仅限${_this.acceptText}格式`)
						reject();
					}
					// 判断是否是图片，如果是图片文件，则进行压缩
					if (acceptType.match('image') || (!acceptType && file.type.match('image'))) {
						// 此处做压缩图片操作，方法已在之前的文章中写过（https://blog.csdn.net/weixin_44134899/article/details/95046994），这里不做赘述
					} else {
						resolve(file)
					}
				});
			},
			/**
			* 删除文件之前的钩子
			* @file {File} 删除的文件
			* @fileList {Array} 文件列表
			**/
			beforeRemove(file, fileList) {
				this.$emit('fileBeforeRemove', file, fileList)
			},
			/**
			* 文件超出个数限制时的钩子
			* @files {File} 当前上传的文件
			* @fileList {Array} 当前的文件列表
			**/
			onExceed(files, fileList) {
				console.log(`文件${files[0].name}上传失败，最多只能上传${this.limit}个文件`)
			},
			/**
			* 文件上传失败时的钩子
			**/
			onError(err, file, fileList) {
				console.log(`文件【${file.name}】上传失败，请刷新重试或联系系统管理员！`)
			},
		},
	};
	
</script>
<style lang="less">
	.com-upload {
		.el-upload {
			display: inline-block;
			text-align: left;
		}
		&.is-drag {
			.el-upload {
				width: 100%;
			}
		}
		.el-upload__tip {
			line-height: 20px;
			.el-upload__tip_tips {
				margin: 0;
				color: #777;
			}
		}
	}
</style>

二、引用：

html部分（这里只列举少数属性的配置例子）：

<com-upload
	v-model="model"
	accept="application/pdf"
	:drag="false"
	accept-text="pdf"
	:buttons="JSON.stringify([{label: '额外按钮1', type: '', id: '01'},{label: '额外按钮2', type: 'primary', id: '02'}])"
	:init-files="JSON.stringify([{name: '01.pdf', url: 'https://www.baidu.com', fileId: '01'},{name: '02.pdf', url: 'https://www.baidu.com', fileId: '02'}])"
	:size="5"
	:limit="3"
	tips="这是额外提：请在上传前检查附件是否正确！"
	@fileChange="fileChange"
	@fileAdd="fileAdd"
></com-upload>

js部分：

fileChange(fileList) {
	console.log("fileList=>",fileList)
},
fileAdd(file) {
	console.log("file=>",file)
},

效果图：
在这里插入图片描述
完。

言_青

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
Element-ui之upload封装

二次封装el-upload组件，以便使用。包含两个部分：创建、引用。说明：1. 包含：组件本身有的各种属性控制、是否拖拽、扩展按钮、上传前的各种校验（图片的话需要压缩）、预览附件（这里支持pdf和图片预览，支持Excel下载，word没写，原理应该和Excel一样，其余的暂不支持）等。2. 这里设置从父组件中传输过来的对象和数组都用JSON串接收，目的是为了方便监听数值变化。3. 代码为...
复制链接

扫一扫