实现目标:
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('请稍后再试')
}
})
},
这样就分别实现了新增和编辑中的文件上传功能。