vue实现文件上传，前后端

前端封装el-upload组件，父组件传值dialogVisible（用于显示el-dialog），子组件接收，并且关闭的时候返回一个值（用于隐藏el-dialog）,最多上传五个文件，文件格式为.jpg\pdf\png

<template>
<div>
<el-dialog width="30%" :visible.sync="dialogShow" append-to-body @close='handleCancle' title="上传发票" class="uploadDialog">
<!--
list-type="picture"
:file-list="fileList"
:on-change="changeFileLength"
:on-success="handleAvatarSuccess"
multiple
-->
<el-upload
ref="upload"
:auto-upload="false"
:on-remove="handleRemove"
:on-change="changeFileLength"
:limit="5"
:on-exceed="handleExceed"
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture"
:file-list="fileList"
accept=".pdf,.jpg,.png"
multiple
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">选择文件</div>
<!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png/pdf文件，且不超过500kb</div> -->
</el-upload>
<el-button @click="upload" type="success">上传文件</el-button>
</el-dialog>
</div>
</template>
<script>
import { upload1 } from "@/api/invoice/invoiceManagement";
import pdfde from "./pdfdefine.png";

export default {
name: "uploadCT",
props:{
dialogVisible:{
type:Boolean,
default:false,
require:true,
}
},
watch: {
dialogVisible: {
handler(val) {
this.dialogShow = val
},
deep: true, // 深度监听
immediate: true, // 初次监听即执行
},
},

data(){
return{
// 上传文件的列表
uploadFiles: [],
// 上传文件的个数
filesLength: 0,
// 上传需要附带的信息
info:{
id:"",
name:"",
},
//显示
dialogShow:this.dialogVisible,
//缩略图
fileList:[],
def : pdfde,
}
},

methods:{
//删除
handleRemove(file, fileList){
console.log("移除");
this.fileList=this.fileList.filter(item=>item.name!=file.name);
this.uploadFiles =this.uploadFiles.filter(item=>item.name!=file.name);
this.filesLength=fileList.length;
},
//超出限制提示
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
//关闭
handleCancle(){
this.uploadFiles= [];
// 上传文件的个数
this.filesLength= 0;
this.dialogShow = false;
this.$emit('closeUploadDialog',this.dialogShow);
this.$refs.upload.clearFiles();
this.fileList=[];
},
// 选择文件触发事件
changeFileLength(file, fileList){
console.log("选择",file,fileList);
this.filesLength = fileList.length;
if(file.name.endsWith('.pdf')){
this.fileList.push({
name:file.name,
url: this.def,
})
}else{
this.fileList.push({
name:file.name,
url:file.url,
})
}
this.uploadFiles=fileList;
},

// 用户点击上传调用
async upload(){
// 触发上传 调用配置 :http-request="uploadFile"
// 即触发 uploadFile函数
console.log('点击',this.filesLength);
if(this.filesLength>0){
this.fileList[0].staus='ready';
// await this.$refs.upload.submit();
await this.uploadFilesToService();
// 上传完成后执行的操作 ...

}else{
this.$modal.msgError( "请先选择文件");
}
},
//上传按钮
async uploadFilesToService(){
console.log("上传",this.uploadFiles.length,this.filesLength);
let that = this;
if (this.uploadFiles.length == this.filesLength){
// 创建FormData上传
let fd = new FormData()
// 将全部文件添加至FormData中qingxian
this.uploadFiles.forEach(file => {
fd.append('file', file.raw)
})
// 将附加信息添加至FormData
fd.append("id", this.info.id)
fd.append("name", this.info.name)
// 配置请求头
const config = {
headers: {
"Content-Type": "multipart/form-data",
}
}
console.log("参数",fd);
// 上传文件
await upload1(fd).then(res => {
/*上传成功处理*/
console.log(res);
if(res.msg=='上传成功'){
this.uploadFiles=[];
this.filesLength = 0;
this.dialogShow = false;
this.$emit('closeUploadDialog',this.dialogShow);
this.$refs.upload.clearFiles();
this.uploadFiles = [];
this.filesLength = 0;
this.fileList = [];
this.$refs.upload.clearFiles();
this.$modal.msgSuccess("上传成功");
}else{
console.log("失败");
const arr1 =res.data.data;
this.$nextTick(()=>{
arr1.map(item1=>{
this.uploadFiles = this.uploadFiles.filter(item2=>item2.name!=item1);
this.fileList = this.fileList.filter(item=>item.name!=item1);
})
})

this.filesLength=this.filesLength-arr1.length;
console.log(this.uploadFiles,this.filesLength);
this.$modal.msgError(res.data.msg);
}

}).catch(err => {/*报错处理*/console.log("报错",err);});

}
}
}
}
</script>

后端接收

@PostMapping("/upload")
public AjaxResult upload(@RequestParam(value = "file") MultipartFile[] file)
{
ArrayList<String> successList = new ArrayList<>();
try {
String localPath = "";
//1.1获取当前日期,当做本地磁盘的目录
Date nowDate = DateUtils.getNowDate();
String format = new SimpleDateFormat("YYYYMMDD").format(nowDate);
String localPathPrefix = "C:\\"+format;
for(MultipartFile f:file){
// 获取文件名
String fileName = f.getOriginalFilename();
// 获取文件后缀
String prefix = fileName.substring(fileName.lastIndexOf("."));
// 保存文件到本地磁盘
localPath = localPathPrefix+"\\"+fileName;
File localFile = new File(localPath);
if (!localFile.getParentFile().exists()) {
localFile.getParentFile().mkdirs();
}
//写入到本地磁盘
f.transferTo(localFile);
// 获取文件在本地磁盘上的路径
String filePath = localFile.getAbsolutePath();
log.info("文件名称："+fileName+"已经存入本地磁盘，全路径为："+filePath);
//成功一个，将文件名放入一个successList
int i = finInvoiceDefineService.OCRToService(filePath);
//删除本地临时磁盘文件
if (localFile.delete()) {
log.info(localFile.getName() + "已经删除");
} else {
log.info("文件删除失败");
}
}
//删除本次磁盘的日期目录
File file1 = new File(localPathPrefix);
if (file1.delete()) {
log.info(file1.getName() + "已经删除");
} else {
log.info("文件删除失败");
}

}catch (Exception e){
log.error(e.toString());
HashMap<String, Object> stringObjectHashMap = new HashMap<>();
stringObjectHashMap.put("msg","OCR识别失败");
stringObjectHashMap.put("data",successList);
return success(stringObjectHashMap);
}
return success("上传成功");
}

 

参考文章：http://blog.ncmem.com/wordpress/2023/12/21/vue%e5%ae%9e%e7%8e%b0%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%ef%bc%8c%e5%89%8d%e5%90%8e%e7%ab%af/

欢迎入群一起讨论