单个文件上传功能实现

1.前端实现
效果：

vue代码实现：

点击方法对应的js代码：

tconst uploadFile = ()=>{
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = '.png,.jpg,.jpeg,.gif' // 这里只允许部分图片类型

  //绑定onchange方法
  input.onchange = async () => {
    if (!input.files || !input.files.length) return
    const file = input.files[0]
    const { name, size, type } = file
    if (size > 1024 * 1024 * backgroundImageSize) {
      window['$message'].warning(`图片超出 ${backgroundImageSize}M 限制，请重新上传！`)
      return false
    }
    if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
      window['$message'].warning('文件格式不符合，请重新上传！')
      return false
    }
    let formData = new FormData();
    formData.append('object', file);
    // 发送上传请求
    post('/file/upload', formData,'multipart/form-data;charset=UTF-8').then(res => {
      if(res.code===200){
        props.optionData.dataset=res.data.fileurl
      }
    });
  }
  //执行点击触发onchange绑定的方法
  input.click()
}

后端对用的接收方法：

	//  formData.append('object', file); 参数名和前端这里保持一直
	@PostMapping("/upload")
	public AjaxResult upload(@RequestBody MultipartFile object) throws IOException{
	
	//public AjaxResult upload(HttpServletRequest request, HttpServletResponse response) throws IOException{
	//使用第二种方法头是则要先执行下面两句获取MultipartFile 
//MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
		//MultipartFile file = multipartRequest.getFile("object");// 获取上传文件对象
		
		String fileName = object.getOriginalFilename();
		//默认文件格式
		String suffixName=v2Config.getDefaultFormat();
		String mediaKey="";
		Long filesize= object.getSize();
		//文件名字
		String fileSuffixName="";
		if(fileName.lastIndexOf(".")!=-1) {//有后缀
			 suffixName = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
			 //mediaKey=MD5.create().digestHex(fileName);
			 mediaKey=SnowflakeIdWorker.getUUID();
			 fileSuffixName=mediaKey+suffixName;
		}else {//无后缀
			//取得唯一id
			 //mediaKey = MD5.create().digestHex(fileName+suffixName);
			mediaKey=SnowflakeIdWorker.getUUID();
			//fileSuffixName=mediaKey+suffixName;
		}
		String virtualKey=getFirstNotNull(v2Config.getXnljmap());
		String absolutePath=v2Config.getXnljmap().get(getFirstNotNull(v2Config.getXnljmap()));
		SysFile sysFile=new SysFile();
		sysFile.setId(SnowflakeIdWorker.getUUID());
		sysFile.setFileName(fileSuffixName);
		sysFile.setFileSize(Integer.parseInt(filesize+""));
		sysFile.setFileSuffix(suffixName);
		sysFile.setCreateTime(DateUtil.formatLocalDateTime(LocalDateTime.now()));
		String filepath=DateUtil.formatDate(new Date());
		sysFile.setRelativePath(filepath);
		sysFile.setVirtualKey(virtualKey);
		sysFile.setAbsolutePath(absolutePath.replace("file:",""));
		iSysFileService.saveOrUpdate(sysFile); //文件信息保存到数据库
		File desc = getAbsoluteFile(v2Config.getFileurl()+File.separator+filepath,fileSuffixName);
		//File savefile = new File(savePath);
		//FileCopyUtils.copy(object.getBytes(), savefile); //和object.transferTo功能一样向本地生成文件
		object.transferTo(desc);
		SysFileVo sysFileVo=BeanUtil.copyProperties(sysFile, SysFileVo.class);
		sysFileVo.setFileurl(v2Config.getHttpurl()+sysFile.getVirtualKey()+"/"+sysFile.getRelativePath()+"/"+sysFile.getFileName());
		return AjaxResult.successData(200, sysFileVo);
	}