网站建设哪好,旅行社网站模板,中小型网站建设信息,网站开发工程师绩效前端封装el-upload组件#xff0c;父组件传值dialogVisible#xff08;用于显示el-dialog#xff09;#xff0c;子组件接收#xff0c;并且关闭的时候返回一个值#xff08;用于隐藏el-dialog#xff09;,最多上传五个文件#xff0c;文件格式为.jpg\pdf\png
tem…前端封装el-upload组件父组件传值dialogVisible用于显示el-dialog子组件接收并且关闭的时候返回一个值用于隐藏el-dialog,最多上传五个文件文件格式为.jpg\pdf\png
templatedivel-dialog width30% :visible.syncdialogShow append-to-body closehandleCancle title上传发票 classuploadDialog!-- list-typepicture --el-uploadrefupload:auto-uploadfalse:http-requestuploadFile:on-changechangeFileLength:limit5:on-exceedhandleExceedactionaccept.pdf,.jpg,.png multiplei classel-icon-upload/idiv classel-upload__text点击上传文件/div/el-upload!-- 上传时点击的按钮 --el-button clickupload typesuccess上传文件/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-requestuploadFile// 即触发 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(上传成功);} 效果展示
