您现在的位置是:今夕何夕> JAVA 文章详情

jFinal+element 用户头像上传

久伴轻尘 2019-10-15 12:57 JAVA 0人已浏览

1:element el-upload属性介绍(本篇文章使用到的)

参数 说明 类型 可选值  
disabled 是否禁用 boolean false
multiple 是否支持多选文件 boolean
show-file-list 是否显示已上传文件列表 boolean true
action 必选参数,上传地址 string
data 上传时附带额外参数 Object
headers 设置上传的请求头部 Object
on-success 上传成功的钩子 function(response,file,fileList)

2:前端上传代码配置

<el-upload
    align="center"
    :disabled="!userForm.userId" 
    :multiple="false"
    class="avatar-uploader"
    :show-file-list="false" 
    action="/future/file/uploadImg"
    :data="uploadData"
    :headers="myheader"
    :on-success="handleAvatarSuccess"
    >
    <img v-if="userForm.userAvatar"  class="avatar"
       :src="'/future/file/downloadFile?fileId='+userForm.userAvatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>                            
</el-upload>

3:配置上传header和额外参数

//this 指向为当前vue对象
this.myheader["Access-Token"] = getToken();//header携带token 视个人情况而定
this.uploadData.busiId = this.userForm.userId;//关联id(用户id)
this.uploadData.itemType= "avatar";//文件上传类型

4:上传成功处理

handleAvatarSuccess(response, file, fileList) {
   this.userForm.userAvatar = response.data.fileId;//上传成功后得到文件id并给用户头像字段赋值
   userUpdate(this.userForm).then(response => {//修改用户信息,保存头像文件储存id
     this.userForm = response.data;
   });
}

5:上传图片接口配置

public void uploadImg() {
  UploadFile uploadFile = getFile();
  if (!FileTool.isImage(uploadFile.getFile())) {
    renderSuccess(SystemStatus.ERROR, "只能上传图片类型");
      return ;
    }
  //进行上传操作
  Attachment attachment = UploadTool.uploadFile(uploadFile, getPara("busiId")
                         , getPara("itemType"),getCurrentUser().getUserId());
  renderSuccess(SystemStatus.SUCCESS, attachment);
}

6:校验是否为图片

public static boolean isImage(File imageFile) {
    if (!imageFile.exists()) {
      return false;
    }
    Image img = null;
    try {
      img = ImageIO.read(imageFile);
      if (img == null || img.getWidth(null) <= 0 || img.getHeight(null) <= 0) {
        return false;
      }
      return true;
    } catch (Exception e) {
      LogKit.error("图片识别失败", e);
      return false;
    }
}

7:文件上传

/**
* @Title: uploadFile  
* @Description:(上传文件 路径: 文件上传配置路径 + 当前日期(yyyyMMdd) + 文件名称)  
* @param @param uploadFile 
* @param @param busiId   业务Id
* @param @param itemType 业务类型
* @param @param userId   
* @param @return    参数  
* @return Attachment    返回类型  
* @throws  
* @author Light_dust  
* @date 2019年9月8日 下午4:49:01
*/      
public static Attachment uploadFile(UploadFile uploadFile, String busiId, String itemType
                                                                        , String userId) {
  String uploadUrl=PropKit.get("uploadUrl");
  String fileName = uploadFile.getFileName();// 文件上传名称
  String extension = fileName.substring(fileName.lastIndexOf(".") + 1);// 得到文件后缀

  // 当前文件上传文件夹(日期 +文件上传类型)
  String folderUrl = "/" + DateTool.getDate("yyyy-MM-dd") + "/"+itemType+"/";
  // 校验上传文件夹是否存在
  FileTool.judgeDirExists(new File(uploadUrl + folderUrl));

  String newName = UploadTool.rename(fileName);// 文件重命名
  uploadFile.getFile().renameTo(new File(uploadUrl + folderUrl + newName));//更改文件路径

  Attachment attachment = new Attachment();//进行文件保存操作
  attachment.setBusiId(busiId).setFileName(fileName).setItemType(itemType).setFileExt(extension)
    .setFilePath(folderUrl + newName);
  attachment.setFileId(StrKit.getRandomUUID()).setCreateUser(userId).setCreateTime(new Date())
    .setMimeType(uploadFile.getContentType()).save();
  return attachment;
}

校验文件夹是否存在

public static void judgeDirExists(File file) {
    if (file.exists()) {
      if (!file.isDirectory()) {
        LogKit.info("存在同名文件,文件夹不需要创建");
      }
    } else {
      LogKit.info("文件夹不存在, 创建中 ..." + file.getPath());
      file.setWritable(true, false);
      file.mkdirs();
      LogKit.info("文件夹创建成功");
    }
}

8:下载文件

public void downloadFile() {
  String fileId = getPara("fileId");
  Attachment attachment = Attachment.dao.findById(fileId);
  if (attachment != null) {
    renderFile(new File(PropKit.get("uploadUrl") + attachment.getFilePath()));
  } else {
    renderSuccess(SystemStatus.ERROR, "文件不存在");
  }
}

9:文件读取(根据文件id拿到)

//http:localhost:port/future/file/downloadFile?fileId=userForm.userAvatar