element upload完整版代码

<el-upload
								class="upload-demo"
								:action="uploadUrl"
								:data="{ module: 'news-consultation' }"
								ref="upload"
								                        accept=".jpg,.png,.doc,.docx,.ppt,.pdf,.xlsx,.xls,.zip,.rar"
								:auto-upload="false"
								:before-upload="handleBeforeUpload"
								:before-remove="beforeRemove"
								:on-preview="openFile"
								:on-remove="
									(...args) => {
										handelDelFile(...args, 'attacheId')
									}
								"
								:on-change="
									(...args) => {
										handleChangeUpload(
											...args,
											'news-consultation',
											'attacheId'
										)
									}
								"
								multiple
								:file-list="mixFileList"
							>
								<el-button size="small">点击上传</el-button>
								<div slot="tip" class="el-upload__tip">
									支持上传jpg、png、doc、docx、ppt、pdf、xlsx、xls
									、zip、rar，单个文件不得超过40M，最多上传5个文件。
								</div>
							</el-upload>

// 文件上传前的格式校验
		async handleBeforeUpload(file, fileList, type) {
			const nameArray = file.name.split('.')
			const suffix = nameArray[nameArray.length - 1]
			let isSuccess = true
			if (type === 'attacheId') {
				if (!this.fileTypeList.includes(suffix)) {
					this.$message.error(
						'支持上传jpg、png、doc、docx、ppt、pdf、xlsx、xls 、zip、rar文件!'
					)

					isSuccess = false
				}
				const isLtXM = file.size / 1024 / 1024 < 40
				if (!isLtXM) {
					this.$message({
						message: '上传文件大小不能超过 40MB!',
						type: 'warning'
					})
					isSuccess = false
				}
			}
			return isSuccess
		},
		// 文件移除前
		beforeRemove(file, fileList) {
			console.log(file)
			return this.$confirm(`是否删除【${file.name}】？`)
		},
		//下载文件
		openFile(e) {
			console.log(e)
			const link = document.createElement('a')
			link.href = `${window.__CTC_ENV__.apiUrl}/attache/downLoad/${e.id}?response-content-type=application/octet-stream`
			link.target = '_blank'
			link.download = e.name
			link.style.display = 'none'
			document.body.append(link)
			link.click()
		},
		/** 文件移除之后*/
		async handelDelFile(file, fileList, type) {
			console.log(file)
			let res = await AssessmentBase.delattlog({ attid: file.id })
			if (res.code === 200) {
				this.$message({
					type: 'success',
					message: '删除成功'
				})
				this.form.attaid.forEach((i, k) => {
					if (i === file.id) {
						this.form.attaid.splice(k, 1)
					}
				})
				if (type === 'attacheId') {
					this.mixFileList = fileList
				}
			}
		},
		async handleChangeUpload(file, fileList, module, type) {
			console.log(file, type)
			// 导入
			let formData = new FormData() //  用FormData存放上传文件
			formData.append('file', file.raw)
			// formData.append('module', module)

			const isSuccess = await this.handleBeforeUpload(
				file,
				fileList,
				type
			)
			console.log(isSuccess)

			if (isSuccess) {
				AssessmentBase.upload(formData).then(
					res => {
						console.log(res)
						this.form.attaid.push(res.data)
						//手动上传无法触发成功或失败的钩子函数，因此这里手动调用
						this.handleSuccessFile(res.data, file, fileList, type)
					},
					err => {}
				)
			}
		},
		// 文件上传成功
		handleSuccessFile(data, file, fileList, type) {
			if (type === 'attacheId') {
				this.mixFileList.push({
					name: file.name,
					id: data,
					url: `${this.uploadUrl}${data}`
				})
			}
		},