elementplus中el-upload自定义请求上传文件

第一部分template中的代码

<el-upload
      style="text-align: center; padding-bottom: 20px;"
      action="#"  这个是默认文件上传的路径，不能为空，所以随便设置个符号
      :show-file-list="false"  这个是是否显示文件上传的列表
      :before-upload="beforeAvatarUpload"  文件上传之前调用的钩子函数，可自行设置判断文件大小和类型
      list-type="picture-card"  文件列表的类型，这个自己看着设置
      :http-request="handleFileUpload"   这个重要自定义上传处理函数
    >
    下边的这些是上传之前显示的背景图  
      <img style="height: 100px;width: 100px;" v-if="$store.state.HomeModule.headImageUrl!==null" :src="$store.state.HomeModule.headImageUrl"  />
      <el-icon v-else ><Plus /></el-icon>
    </el-upload>
  </el-dialog>

第二部分 script中的代码

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('请选择JPG或者PNG格式图片')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('请保证文件大小小于2MB!')
    return false
  }
  return true
}

const handleFileUpload=(file)=>{
  const formData = new FormData();  //用表单形式上传
  console.log(file);                
  formData.append("file",file.file);  //这个地方file.file ，file参数中除了包含文件还有其他内容，所以用file.file
  formData.append('id',userInfo.data.id);

  link(apiUrl.uploadHeadImageWithId,"POST",formData).then((result) => {
    if(result.data.code===200){
      console.log("图片地址",result.data.result);
      store.commit("SET_HeadImageUrl",result.data.result); //上传成功后把图片外链更新到vuex中
      ElMessage.success("图片上传成功");
    }else{
      ElMessage.error("图片上传失败");
    }
  }).catch((err) => {
    ElMessage.error("图片上传失败");
  });
}

后端代码

@ApiOperation("上传头像图片")
    @PostMapping("/uploadHeadImageWithId")
    public Result<String> uploadHeadImageWithId(
            @RequestParam("file") MultipartFile file,
            @RequestParam(name="id",required = true) Integer id) {
        Result<String> result = new Result();
        User currentUser=userService.getById(id);
        try {
            
           //下边的内容可以不看
            if(file==null) return result.error500("图片内容为空");

                String orgName = null;
                String fileName = null;
                if (file != null) {
                    orgName = file.getOriginalFilename();
                    if (orgName != null) {
                        //给文件重命名
                        fileName = System.currentTimeMillis()  + orgName.substring(orgName.lastIndexOf('.'));
                    }
                }
                //minio上传流程
                String bucketName = currentUser.getUserName(); //用户名作为桶名
                bucketName = bucketName.toLowerCase();
                boolean isBucket = minIoUtil.bucketExists(bucketName);
                if (!isBucket) {
                    minIoUtil.makeBucket(bucketName);
                }
                boolean fileExisted = minIoUtil.isFileExisted(fileName, bucketName);
                if (fileExisted) {
                    log.error("文件" + bucketName + "   " + fileName + "已存在！");
                }
                //上传
                minIoUtil.putObject(bucketName, fileName, file.getInputStream(), file.getContentType());
                //若上传成功，则上传信息存储进数据库
                boolean fileExisted2 = minIoUtil.isFileExisted(fileName, bucketName);
                if (fileExisted2) {
                    //存储文件地址 ，但是外链不知道是不是会过期，尽量获取用户信息的时候重置外链
                    QueryWrapper<UserFile> queryWrapper = new QueryWrapper<>();
                    queryWrapper.eq("uid",id);
                    UserFile userFile = userFileService.getOne(queryWrapper);
                    boolean flag=true;//表示文件表中是否有id用户的信息,默认为有
                    String fileOldPath=""; //旧头像路径
                    if(userFile==null){ //文件表中不存在用户数据，则就重新插入
                        flag=false;
                        userFile = new UserFile();
                        userFile.setUid(id);
                    }else{
                        fileOldPath = userFile.getHeadImagePath();
                    }
                    String objectUrl = minIoUtil.getObjectUrl(bucketName, fileName);
                    userFile.setHeadImagePath(fileName);
                    userFile.setHeadImageUrl(objectUrl);
                    if(flag) userFileService.updateById(userFile);
                    else userFileService.save(userFile);
                    if(!"".equals(fileOldPath)) minIoUtil.removeObject(bucketName,fileOldPath); //有的话就删除
                    result.setResult(objectUrl); //设置对象地址
                }
            result.success("上传成功！");
        } catch (Exception e) {
            e.printStackTrace();
            log.error(e.getMessage());
            result.error500("上传失败！");
        }
        return result;
    }

捣鼓了一下午，效率太底了