0


Ruoyi框架学习--上传和下载

文件上传--以上传个人头像为例子:

文件上传下载实现流程:后台手册 | RuoYi

1、前端就是给了个按钮,点一下就开始文件上传了。但是在点击开始长传之前要通过前端对上传的文件的类型(因为照片都是jpg、png)的进行一个预先判断:

// 上传预处理
    beforeUpload(file) {
      if (file.type.indexOf("image/") == -1) {
        this.$modal.msgError("文件格式错误,请上传图片类型,如:JPG,PNG后缀的文件。");
      } else {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          this.options.img = reader.result;
        };
      }
    },

2、然后开始上传走到后端来,运行核心方法:com.ruoyi.web.controller.system.SysProfileController

 /**
     * 头像上传
     */
    @Log(title = "用户头像", businessType = BusinessType.UPDATE)
    @PostMapping("/avatar")
    public AjaxResult avatar(@RequestParam("avatarfile") MultipartFile file) throws Exception
    {
        if (!file.isEmpty())    //判断传过来的文件不能为空
        {
            LoginUser loginUser = getLoginUser();    //获取传过来的用户信息
            String avatar = FileUploadUtils.upload(RuoYiConfig.getAvatarPath(), file, MimeTypeUtils.IMAGE_EXTENSION);     //根据文件路径、文件内容、文件后缀名进行文件上传(核心)
            if (userService.updateUserAvatar(loginUser.getUsername(), avatar))
            {
                AjaxResult ajax = AjaxResult.success();    //通过ajax发布成功消息
                ajax.put("imgUrl", avatar);      //使用ajax把路径和图片名称捆绑传输
               
                loginUser.getUser().setAvatar(avatar);    // 更新缓存中的用户头像
                tokenService.setLoginUser(loginUser);     // 设置token中的用户信息
                return ajax;
            }
        }
        return AjaxResult.error("上传图片异常,请联系管理员");
    }
}

3、其中牵扯到一个重要的文件上传方法:com.ruoyi.common.utils.file.FileUploadUtils下的

 /**
     * 文件上传
     *
     * @param baseDir 相对应用的基目录
     * @param file 上传的文件
     * @param allowedExtension 上传文件类型
     * @return 返回上传成功的文件名
     * @throws FileSizeLimitExceededException 如果超出最大大小
     * @throws FileNameLengthLimitExceededException 文件名太长
     * @throws IOException 比如读写文件出错时
     * @throws InvalidExtensionException 文件校验异常
     */
    public static final String upload(String baseDir, MultipartFile file, String[] allowedExtension)
            throws FileSizeLimitExceededException, IOException, FileNameLengthLimitExceededException,
            InvalidExtensionException
    {
        int fileNamelength = Objects.requireNonNull(file.getOriginalFilename()).length();
        if (fileNamelength > FileUploadUtils.DEFAULT_FILE_NAME_LENGTH)
//设定文件名长度不能超过预设的最大长度
        {
            throw new FileNameLengthLimitExceededException(FileUploadUtils.DEFAULT_FILE_NAME_LENGTH);
        }
//判断上产文件类型是正确的
        assertAllowed(file, allowedExtension);
//对文件名进行二次编码避免重复
        String fileName = extractFilename(file);
//设定最终的文件路径
        String absPath = getAbsoluteFile(baseDir, fileName).getAbsolutePath();
        file.transferTo(Paths.get(absPath));
        return getPathFileName(baseDir, fileName);
    }

下载实现流程

1、参考示例代码。

function downloadFile(value){
    window.location.href = ctx + "common/download/resource?resource=" + value;
}

2、参考

Controller

下载方法

/**
 * 本地资源通用下载
 */
@GetMapping("/common/download/resource")
public void resourceDownload(String resource, HttpServletRequest request, HttpServletResponse response)
        throws Exception
{
    // 本地资源路径
    String localPath = Global.getProfile();
    // 数据库资源地址
    String downloadPath = localPath + StringUtils.substringAfter(resource, Constants.RESOURCE_PREFIX);
    // 下载名称
    String downloadName = StringUtils.substringAfterLast(downloadPath, "/");
    response.setCharacterEncoding("utf-8");
    response.setContentType("multipart/form-data");
    response.setHeader("Content-Disposition",
            "attachment;fileName=" + FileUtils.setFileDownloadHeader(request, downloadName));
    FileUtils.writeBytes(downloadPath, response.getOutputStream());
}
标签: 学习 vue.js 前端

本文转载自: https://blog.csdn.net/qq_39367410/article/details/126829563
版权归原作者 迷人的小松子 所有, 如有侵权,请联系我们删除。

“Ruoyi框架学习--上传和下载”的评论:

还没有评论