实现目标：

1.新增文件：点击新增按钮，出现弹窗，点击上传文件，选择文件后，点击确定按钮，实现文件的上传，且限制文件格式只能为word和pdf格式。

2.编辑文件：点击重新上传按钮，出现弹窗，点击上传文件，选择文件后，点击确定按钮，实现文件的上传，且限制文件格式只能为word和pdf格式。

实现效果：

1.新增文件：

 2.编辑文件：

 

 

实现方法：

1.后端的swagger中：

 

 

 2.api的js文件中：

上传文件：（新增接口必须与该接口结合使用）

export function planUpFile(param) {
    return request({
        url: '/xxxx/xxxx/upFile',
        method: 'post',
        data: param,
    });
}

新增接口：

export function planInsert(param) {
    return request({
        url: '/xxx/xxxx/insert',
        method: 'post',
        data: param,
        headers: {
            'Content-Type': 'application/json;charset=UTF-8',
        },
    });
}

 重新上传接口：

export function updateFileById(param) {
    return request({
        url: '/xxxx/xxxx/updateFileById',
        method: 'post',
        data: param,
    });
}

3.vue文件中：

引入api中的上传文件接口

import {  planUpFile } from '@/api/xxx/index'

template中：

新增按钮：

<el-button class="out-btn" @click="editAndAddMaterial()">
				<i class="el-icon-plus"></i>
				新增
			</el-button>

重新上传按钮：

<template slot-scope="scope">
						<el-button @click="uploadPlan(scope.row)" type="text" size="small" style="margin-right: 20px">
							<i class="el-icon-upload2"></i>
							重新上传
						</el-button>
					</template>

新增的弹窗：与重新上传的弹窗类似，不在赘述

重新上传的弹窗： 

<!-- 重新上传文件开始 -->
		<el-dialog :title="dialogTitle" :visible.sync="dialogVisibleFile" style="height: 40%">
			<div class="edit-con">
				<div class="edit-item">
					<div class="item-name">文件上传:</div>
					<el-upload
						class="upload-demo"
						action="https://jsonplaceholder.typicode.com/posts/"
						:on-change="handlePreview"
						:on-remove="handleRemove"
						:before-remove="beforeRemove"
						:before-upload="beforeAvatarUpload"
						multiple
						:limit="2"
						:on-exceed="handleExceed"
						:file-list="fileList"
					>
						<el-button size="small" type="primary" class="upload-btn">上传文件</el-button>
					</el-upload>
				</div>
			</div>
			<div class="edit-bottom">
				<el-button @click="dialogVisibleFile = false" class="edit-btn-cancel">取消</el-button>
				<el-button @click="makeSureUpdate()" class="edit-btn-make">确定</el-button>
			</div>
		</el-dialog>
		<!-- 重新上传文件结束 -->

data中：

dialogTitle: '',
dialogVisibleFile: false,
planFileUrl: '',
planFile: '',
fileId: '',
fileList: [],

methods中：

在使用el-upload上传文件的过程中，调用接口使文件上传，且接口返回的为文件的url，这在新增接口时可以用到（新增接口除了上传文件还需上传表中的其他信息），重新上传相当于对文件的编辑，即再次上传的文件会覆盖之前的文件。

//  文件上传--start
		// 上传文件之前的钩子，参数为上传的文件
		beforeAvatarUpload(file) {
			// 文件类型判断
			var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
			const extension = testmsg === 'doc'
			const extension2 = testmsg === 'pdf'
			const extension3 = testmsg === 'docx'
			if (!extension && !extension2 && !extension3) {
				this.$message({
					message: '上传文件只能是 word、pdf格式!',
					type: 'warning'
				})
				this.dialogVisibleFile = false
				this.fileList = []
			} else {
				// 参数拼接
				let fileData = new FormData()
				fileData.append('file', file)
				// 调用接口
				planUpFile(fileData).then((res) => {
					if (res.status == 200) {
						this.planFileUrl = res.data.message
					} else {
						this.$message.warning('请稍后再试')
					}
				})
			}
		},
		// 文件列表移除文件时的钩子
		handleRemove(file, fileList) {
			console.log(file, fileList)
		},
		// 文件发生改变时的钩子
		handlePreview(obj) {
			this.planFile = obj.raw
		},
		// 文件超出个数限制时的钩子
		handleExceed(files, fileList) {
			this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
		},
		// 删除文件之前的钩子
		beforeRemove(file, fileList) {
			return this.$confirm(`确定移除 ${file.name}？`)
		},
		//  文件上传--end

新增接口：

// 弹窗确定按钮
		makeSure() {
			let params = {
// 除上传文件外其他信息的参数拼接
				xxx: this.xxx.xxxx,
				xxx: this.xxx.xxxx,
			}
			// 新增接口对接
				params.filePath = this.planFileUrl // 上传文件接口传回来的接口信息为文件路径
				planInsert(params).then((res) => {
					if (res.data.code == 200) {
						this.tableData = res.data.data
						this.$message.success('新增成功')
						this.dialogVisible = false // 关闭弹窗
						this.refreshData() // 刷新页面
					} else {
						this.$message.warning('请稍后再试')
					}
				})
		},

重新上传接口：

// 文件重新上传
		uploadPlan(row) {
			this.dialogVisibleFile = true
			this.fileList = []
			this.fileId = row.id
		},
		makeSureUpdate() {
			let updataFile = new FormData()
			updataFile.append('id', this.fileId)
			updataFile.append('file', this.planFile)

			updateFileById(updataFile).then((res) => {
				if (res.data.code == 200) {
					this.$message.success('重新上传文件成功')
					this.dialogVisibleFile = false
				} else {
					this.$message.warning('请稍后再试')
				}
			})
		},

这样就分别实现了新增和编辑中的文件上传功能。