vue使用axios上传文件展示进度

前端vue

 <div style="display: flex;justify-content: flex-start;align-items: center">
          <n-input readonly v-model:value="optionData.dataset" size="small"></n-input>
          <n-button  size="small">
            <n-icon size="25" class="go-cursor-pointer" style="z-index: 9999;" @click="uploadFile">
              <Upload style="color: white"></Upload>
            </n-icon>
          </n-button>
</div>

js代码

const 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);
    // 发送上传请求
    const config = {
      headers:{
        'Content-Type': 'multipart/form-data;charset=UTF-8'
      },
      onUploadProgress: (progressEvent:any) => {
        const uploadPercentage = Math.round((progressEvent.loaded / progressEvent.total) * 100); // 更新上传进度百分比
        console.log("进度",uploadPercentage)
      },
    }
    axiosInstance.post('/file/upload', formData,config).then(res=>{
        props.optionData.dataset=res.data.fileurl
    })
  }
  //执行点击触发onchange绑定的方法
  input.click()
}

java代码

	@PostMapping("/upload")
	public AjaxResult upload(@RequestBody MultipartFile object) throws IOException{
		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);
		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);
	}

如果前端使用的时ajax：

    function uploadFile() {  
      var formData = new FormData();  
      var fileInput = document.getElementById('fileInput');  
      var file = fileInput.files[0];  
      formData.append('object', file);  
  
      var xhr = new XMLHttpRequest();  
      xhr.open('POST', '/upload', true);  
      xhr.upload.onprogress = function(event) {  
        if (event.lengthComputable) {  
          var percentComplete = (event.loaded / event.total) * 100;  
          console.log(percentComplete + '% uploaded');  
          // 在这里更新进度条或进度显示  
        }  
      };  
      xhr.onload = function() {  
        if (this.status === 200) {  
          console.log('File uploaded successfully');  
          // 在这里处理上传成功后的操作  
        } else {  
          console.log('File upload failed');  
        }  
      };  
      xhr.send(formData);  
    }