spring boot+iview 前后端分离架构之文件上传的实现（三十一）

公众号

大家可以直接微信扫描上面的二维码关注我的公众号，然后回复【bg31】 里面就会给到源代码的下载地址同时会附上相应的视频教程，并定期在我的公众号上给大家推送相应的技术文章，欢迎大家关注我的公众号。

文件上传

在任何一个系统都会涉及到文件的上传，因此在此处我们就实现一个图片上传的功能，图片上传使用了iview的upload组件，在本章中我们主要对用户模块进行改造，我们在用户模块增加一个用户头像的功能，用户头像我们本身就有进行了字段的设计因此不需要再去改造我们的用户实体了。

前端改造

main.js引入配置的全局变量

/**
 * @description 全局注册应用配置
 */
Vue.prototype.$runConfig = runConfig;

编写baseImgUpload图片上传组件

在components目录底下创建一个upload文件夹，接着在该文件夹底下编写baseImgUpload.vue和index.js文件

baseImgUpload.vue代码如下

index.js代码如下：

import baseImgUpload from './baseImgUpload.vue';
export default baseImgUpload;

配置文件dev.js改造

export const runDevConfig = {
  baseUrl : 'http://127.0.0.1:8288',
  imgUrl : 'http://127.0.0.1:80/merJoinResource'
};

addUser.vue的改造

updateUser.vue的改造

后端改造

aplication-dev.yml增加以下的配置信息

# 文件上传的地址
file:
  upload:
    path: D:/static/merJoinResource/

FileController文件上传的实现

package com.github.bg.admin.core.controller;

import com.github.bg.admin.core.constant.SystemStaticConst;
import com.github.bg.admin.core.entity.ReturnInfo;
import com.github.bg.admin.core.util.UuidUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

/**
 * @author linzf
 * @since 2019-06-11
 * 类描述：实现文件上传
 */
@RestController
@RequestMapping(value = "/file")
public class FileController {

    private static final Logger logger = LoggerFactory.getLogger(FileController.class);

    @Value("${file.upload.path}")
    private String uploadPath;

    /**
     * 功能描述：实现文件上传
     * @param file 文件的file
     * @param idImageType 文件类型
     * @return
     */
    @PostMapping(value = "uploadFile", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public ReturnInfo uploadFile(@RequestParam("file") MultipartFile file,
                                 @RequestParam("idImageType") String idImageType) {
        if (file.isEmpty()) {
            return new ReturnInfo(SystemStaticConst.FAIL, "上传文件不能为空！");
        }
        if (idImageType == null || "".equals(idImageType)) {
            idImageType = "tmp";
        }
        // 获取文件名
        String fileName = file.getOriginalFilename();
        logger.info("上传的文件名为：" + fileName);
        // 获取文件的后缀名
        String suffixName = fileName.substring(fileName.lastIndexOf("."));
        logger.info("上传的后缀名为：" + suffixName);
        // 文件上传后的路径
        String filePath = uploadPath;
        if (filePath == null || "".equalsIgnoreCase(filePath)) {
            filePath = "E://test//";
        }
        filePath = filePath + idImageType + "//";
        // 解决中文问题，liunx下中文路径，图片显示问题
        fileName = UuidUtils.getUUID() + suffixName;
        File dest = new File(filePath + fileName);
        // 检测是否存在目录
        if (!dest.getParentFile().exists()) {
            dest.getParentFile().mkdirs();
        }
        try {
            file.transferTo(dest);
            Map entity = new HashMap<>(2);
            entity.put("name", idImageType + "/" + fileName);
            entity.put("url", idImageType + "/" + fileName);
            return new ReturnInfo(SystemStaticConst.SUCCESS, "上传文件成功！", entity);
        } catch (IllegalStateException e) {
            e.printStackTrace();
            return new ReturnInfo(SystemStaticConst.FAIL, "上传文件失败！请联系管理员！");
        } catch (IOException e) {
            e.printStackTrace();
            return new ReturnInfo(SystemStaticConst.FAIL, "上传文件失败！请联系管理员！");
        }
    }

}

nginx的配置

通过dev.js配置的图片的文件的地址是：http://127.0.0.1:80/merJoinResource，后端配置的保存图片文件的地址是：D:/static/merJoinResource/，因此我们需要配置一个nginx来实现图片的读取，打开nginx的conf目录底下的nginx.conf增加以下配置：

 server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location /merJoinResource {
            root   D:\static;
        }
}

启动项目

最后我们启动我们的项目，同时启动nginx，然后访问我们的用户组织模块，我们会看到我们可以正常的上传用户的图片，同时可以显示出来。

上一篇文章地址：spring boot+iview 前后端分离架构之用户管理的实现（三十）
下一篇文章地址：spring boot+iview 前后端分离架构之登陆密码RSA加密（三十二）