springboot+vue+element-ui实现文件上传前后台代码+文件上传后台工具类

「爱情、让人受尽委屈。」 2022-12-15 14:13 371阅读 0赞

//新增模板接口
    @PreAuthorize("@ss.hasPermi('pshdhx:template:add')")
    @Log(title="template",businessType=BusinessType.INSERT)
    @PostMapping("add")
    @ResponseBody
    public AjaxResult add (Template template,MutipartFile file){
    	if(file!=null){
    		String filePath = MyProjectConfig.getUploadPath();	//获取服务器上传文件的路径
    		String templateFilePath = FileUploadUtil.upload(filePath,file); //文件上传，返回文件存储路径
    		template.setTemplateFilePath(templateFilePath);
    		template.setTemplateFileName(file.getOriginalFilename());
    	}
    	return toAjax(templateService.insertTemplate(template));
    }
    
    //文件上传工具类
    /**
    *@author pshdhx
    */
    public class FileUploadUtil{
    	//默认大小
    	public static final long DEFAULT_MAX_SIZE = 50 *1024 *1024;
    
    	//默认的文件名最大长度
    	public static final int DEFAULT_FILE_NAME_LENGTH = 100;
    
    	//默认上传的服务器路径
    	private staitc String defaultBaseDir = MyProject.getProfile();
    
    	private staitc int counter = 0;
    
    	public static void setDefaultBaseDir(String defaultBaseDir){
    		FileUploadUtil.defaultBaseDir = defaultBaseDir;
    	}
    
    	public static String getDefaultBaseDir(){
    		return defaultBaseDir;
    	}
    
    	//以默认配置进行文件上传
    	public static final String upload(MutipartFile file) throws IOException{
    		try{
    			return upload(getDefaultBaseDir(),file,MimeTypeUtils.Default_ALLOWED_EXTENSION);
    		}
    		catch(Exception e){
    			throw new IOException(e.getMessage(),e);
    		}
    	}
    	//根据文件路径进行上传
    	public static final String upload(String baseDir,MultipartFile file) throws Excetion{
    		try{
    			return upload(baseDir,MimeTypeUtil.DEFAULT_ALLOWED_EXTENSION);
    		}catch(Exception){
    			throw new IOException(e.getMessage(),e);
    		}
    	}
    
    	//文件上传
    	public static final String upload(String baseDir,MutipartFile file,String[] allowedExtension)
    		throws FileSizeLimitExceededException,IOEXxception,FileNameLengthLimitExceedException,
    		InvalidExtensionException{
    			int fileNamelength = file.getOriginalFilename().length();
    			if(fileNamelength>FileUploadUti.DEFAULT_FILE_NAME_LENGTH){
    				throw new FileNameLengthLimitExceededException(FileUploadUtil.DEFAULT_FILE_NAME_LENGTH);
    			}
    			assertAllowed(file,allowedExtension);
    			String fileName = extracFilename(file);
    			File desc = getAbsoluteFile(baseDir,fileName);
    			file.transferTo(desc);
    			String pathFileName = getPathFileName(baseDir,fileName);
    			return pathFileName;
    		}
    
    	//编码文件名
    	public static final String extracFilename(MultiPartFile file){
    		String  fileName = file.getOriginalFilename();
    		String extension = getExtension(file);
    		fileName = encodingFilename(fileName)+ "." + extension;
    		return fileName;
    	}
    
    	public static final File getAbsoluteFile(String uploadDir,String fileName) throws IOException{
    		File desc = new File(new File(uploadDir).getAbsolutePath()+File.spearator+fileName);
    		if(!desc.getParantFile().exists()){
    			desc.getParentFile().mkdirs();
    		}
    		if(!desc.exists()){
    			desc.createNewFile();
    		}
    		return desc;
    	}
    
    	private static final String getPathFileName(String uploadDir,String fileName) throws IOException{
    		int dirLastIndex = MyProject.getProfile().length()+1;
    		String currentDir = StringUtils.subString(uploadDir,DirLastIndex);
    		String pathFileName = "/"+currentDir+"/"+fileName;
    		return pathFileName;
    	}
    	//编码文件名
    	private static final String encodingFilename(String fileName){
    		fileName = fileName.replace("_"," ");
    		fileName = Md5Utils.hash(fileName);
    		return fileName;
    	}
    	//文件大小检验
    	public static final void assertAllowed(MultipartFile file,String[] allowedExtension) throws
    		FileSizeLimitExceededException,InvalidExtendsionException{
    		long size = file.getSize();
    		if(DEFAULT_MAX_SIZE !=-1 && size> DEFAULT_MAX_SIZE){
    			throw new FileSizeLimitExceededException(DEFAULT_MAX_SIZE/1024/2014);
    		}
    		String fileName = file.getOriginalFilename();
    		String extension = getExtension(file);
    		if(allowedExtension != null && !isAllowedExtension(extension,allowedExtension)){
    			if(allowedExtension == MimeTypeUtils.IMAGE_EXTENSION){
    				throw new InvalidExtensionException.InvalidImageExtensionException(allowedExtension,extension,fileName);
    			}else if(allowedExtension == MimeTypeUtils.FLASH_EXTENSION){
    				throw new InvalidExtension.InvalidFlashExtensionException(allowedExtension,extension,fileName);
    			}else if(allowedExtension == MimeTypeUtils.MEDIA_EXTENSION){
    				throw new InvalidExtensionException.InvalidMediaExtensionException(
    					allowedExtension,extension,fileName);
    			}else{
    				throw new InvalidExtensionException(allowedExtension,extension,fileName);
    			}
    		}
    	}
    	//判断ＭＩＭＥ类型是否是ＭＩＭＥ允许的类型
    	public static fianl boolean isAllowedExtension(String extension,String[] allowedExtension){
    		for(String str : allowedExtension){
    			if(str.equalIgnoreCase(extension)){
    				return true;
    			}
    		}
    		return false;
    	}
    
    	//获取文件名的后缀
    	public static final String getExtension(MultipartFile file){
    		String extension = FilenameUtils.getExtension(file.getOriginalFilename());
    		if(StringUtils.isEmpty(extension)){
    			extension = MimeTypeUtils.getExtension(file.getContentType());
    		}
    		return extension;
    	}
    }
    
    //媒体类型工具类
    public class MimeTypeUtis{
    	public staitc final String IMAGE_PNG = "image/png";
    	public static final String IMAGE_JPG = "image/jpg";
    	public static fianl String IMAGE_JPEG = "image/jpeg";
    	public static final String IMAGE_BMP = "image/bmp";
    	public static final String IMAGE_GIF = "image/gif";
    
    	public static fanal String[] IMAGE_EXTENSION = {"bmp","gif","jpg","jpeg","png"};
    	public static final String[] FLASH_EXTENSION = {"swf","flv"};
    	public static final String[] MEDIA_EXTENSION = {"swf","flv","mp3","wav","wma","wmv","mid","avi","mpg","asf","rm","rmvb"};
    	public static final String[] DEFAULT_ALLOWED_EXTENSION = {
    		//图片
    		"bmp","gif","jpg","jpeg","png",
    		//word excel powerpoint
    		"doc","docx","xls","xlsx","ppt","pptx","html","htm","txt",
    		//压缩文件
    		"rar","zip","gz","bz2",
    		//pdf
    		"pdf"
    	}
    	public static String getExtension(String prefix){
    		switch(prefix){
    			case IMAGE_PNG:
    				return "png";
    			case IMGE_JPG:
    				return "jpg";
    			case IMAGE_JPEG
    				return "jpeg";
    			case IMAGE_BMP
    				return "bmp";
    			case IMAGE_GIT
    				return "gif";
    			default:
    				return "";
    		}
    	}
    }
    
    
    element-ui +vue 实现文件上传前端
    <el-form-item label="上传文件">
    	<el-upload
    		ref="upload"
    		:limit="1"
    		:data=”form“  //form是后端回显过来的表单数据
    		:headers="upload.headers"
    		:action="upload.url"
    		:auto-upload="false"
    		drag
    		:on-error="uploadFalse"
    		:on-success="uploadSuccess"
    		:on-progress="handleFileUploadProgress"
    		:before-upload="beforeAvatarUpload"
    		:on-preview="downloadFile"
    		:on-change="fileChange"
    		:file-list="fileList"
    	>
    		<i class="el-icon-upload"></i>
    		<div class="el-upload_text">
    			将文件拖到此处，或<em>点击上传</em>
    		</div>
    	</el-upload>
    </el-form-item>
    
    定义数据对象：
    	data(){
    		return{
    			upload:{
    				headers:{Authorization:"Bearer"+getToken()},
    				url:process.env.VUE_APP_BASE_API+"/basesystem/formtemplate/edit",
    				isUploading:false
    			},
    			fileList:[],
    		}
    	}，
    	methods:{
    		fileChange(file){
    			this.form.fileName = file.name;
    			this.changeFile = true;
    		},
    		uploadFalse(response,file,fileList){
    			this.$message({
    				message:'文件上传失败',
    				type:"error"
    			})
    		},
    		uploadSucccess(response,file,fileList){
    			if(response.code == 200){
    				this.$message({
    					message:'上传成功',
    					type:'succcess'
    				})
    				this.open = false;
    				this.getList(); //重新请求页面数据
    			}else{
    				this.$message({
    					message:'上传失败',
    					type:'error'
    				})
    				this.open = false;
    				this.getList();
    			}
    		},
    		handleFileUploadProgress(event,file,fileList){
    			this.uploadisUploading = true
    		},
    		//文件下载
    		downloadFile(file){
    			let a = document.createElement("a");
    			a.href = this.downloadUrl;
    			a.setAttribute("download","文件");
    			a.click();
    		},
    		//上传之前
    		beforeAvatarUpload(file){
    			this.form.fileName = file.name;
    			let tmp = file.name.subString(file.name.lastIndexOf(",")+1);
    			const extension1 = temp==="xlsx";
    			const extension2 = temp==="xlsm";
    			const extension3 = temp==="xls";
    			const ext = extension1||extension2||extension3;
    			if(!extension1&&!extension2&&!extension3){
    				this.$message({
    					message:'上传文件必须是xls或是xlsx文件',
    					type:'error'
    				})
    			}
    			const isLt1m = file.size/1024/1024<1;
    			if(!isLt1M){
    				this.$message({
    					message:'上传文件大小不能超过1MB'
    					type:'error'
    				})
    			}
    			return ext&& isLt1M;
    		},
    
    		//添加表单操作
    		handleAdd(){
    			this.upload.url = process.evu.VUE_APP_BASE_API+"/basesystem/formtempaltemanage/add",
    			this.reset();
    			this.getTreeselectFormClass();
    			this.open = true;
    			this.title = "添加表单模板"
    		}，
    		//修改表单操作
    		handleUpdate(row){
    			this.reset();
    			this.downloadUrl = proceess.env.VUE_APP_BASE_API+"/common/showing?delete=false&fileName="+row.fileName;
    			const formTemplateId = row.formTemplateId || this.ids
    			getTemplate(formTemplateId).then(response=>{
    				this.form = response.data;
    				this.open = true;
    				this.title = "修改表单模板"
    				this.fileList = [];
    				this.fileList.push({name:response.data.fileName,url:process.evn.VUE_APP_BASE_API+
    				"common/showing/?delte=false&fileName-"+response.data.formPath});
    			})
    		},
    		//提交按钮
    		submitForm:function(form){  //此处的form是从upload传递过来的
    			delete form.params; //因为后端用实体类接受，所要删除前端自带的参数，要不然后端会报错
    			this.$refs["form"].validate(valid=>{
    				if(valid){
    						if(this.form.formTemplateId!=undefined){
    							//走修改接口
    							uploadTemplate(this.form).then(res=>{
    								if(res.code == 200){
    									this.msgSuccess("修改成功");
    									this.open = false;
    									this.getList(); //重新请求表单数据
    								}else{
    									this.msgError(response.msg);
    								}
    							})
    						}else{
    							//走添加接口
    							this.$refs.upload.submit();
    						}
    							
    					}
    			})
    		}
    
    	},