当前位置：首页 > news >正文

vue实现文件上传，前后端

news 2025/7/9 2:47:45

前端封装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" --><el-uploadref="upload":auto-upload="false":http-request="uploadFile":on-change="changeFileLength":limit="5":on-exceed="handleExceed"action=""accept=".pdf,.jpg,.png" multiple><i class="el-icon-upload"></i><div class="el-upload__text">点击上传文件</div></el-upload><!-- 上传时点击的按钮 --><el-button @click="upload" type="success">上传文件</el-button></el-dialog></div>
</template>
<script>
import {  upload } from "@/api/invoice/invoiceManagement";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,}},methods:{//超出限制提示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();},// 修改当前文件列表长度changeFileLength(file, fileList){this.filesLength = fileList.length},// 用户点击上传调用async upload(){// 触发上传 调用配置 :http-request="uploadFile"// 即触发 uploadFile函数await this.$refs.upload.submit();// 上传完成后执行的操作 ...this.$modal.msgSuccess("上传成功");},// 该函数还是会被调用多次// 每次param参数传入一个文件uploadFile(param){console.log("参数",param);// 将文件加入需要上传的文件列表this.uploadFiles.push(param.file)// 当uploadFiles长度等于用户需要上传的文件数时进行上传if (this.uploadFiles.length == this.filesLength){// 创建FormData上传let fd = new FormData()// 将全部文件添加至FormData中this.uploadFiles.forEach(file => {fd.append('file', file)})// 将附加信息添加至FormDatafd.append("id", this.info.id)fd.append("name", this.info.name)// 配置请求头const config = {headers: {"Content-Type": "multipart/form-data",}}console.log("参数",fd);// 上传文件upload(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();}}).catch(err => {/*报错处理*/});}}}
}
</script>

后端接收

 @PostMapping("/upload")public AjaxResult upload(@RequestParam(value = "file") MultipartFile[] file){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);//上传到文件服务器，自己掉接口//上传完成后，删除本地临时磁盘文件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){System.out.println(e);return error("上传失败");}return success("上传成功");}

效果展示