Springboot项目，使用ElementUi上传图片及回显

项目准备：

        一个搭建完成的SpringBoot基础项目。如未创建，可按照此教程创建。

创建springboot项目教程

        在上传中会需要产生一个随机文件名，这里我使用的是hutool工具类来帮我们创建。

SpringBoot上传图片后端

在pom文件中导入依赖

        <!--hutool-->
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.7.13</version>
        </dependency>

首先：在controller层建立一个FileController类。用于接收并存储上传的文件

@RestController
@RequestMapping("/file")
public class FileController {

    /**
     * 上传图片接口
     */
    @PostMapping("/upload")
    public Result upload(MultipartFile file, HttpServletRequest request) {
        try {
            // 获取文件的类型
            String originalFilename = file.getOriginalFilename();
            String type = FileUtil.extName(originalFilename);
            // 随机产生一个新的文件名
            String uuid = IdUtil.fastSimpleUUID();
            // 文件名+类型名
            String fileUUID = uuid + StrUtil.DOT + type;

            // 自定义一个存储图片的文件路径
            String path = "E:/NoteStudy/upload/image/";
            // 采用日期格式化的方式，对每天上传的图片按日期进行分类保存
            SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy/MM/dd/");
            // dir代表目录（/2024/04/08/）
            String dir = simpleDateFormat.format(new Date());
            /**
             * 将文件路径+日期路径拼接，成为图片的存储路径
             * 文件夹路径：E:/NoteStudy/upload/image/2024/04/08/
             */
            File newFileMkr = new File(path + dir);
            // 如果此路径不存在，则创建
            if (!newFileMkr.exists()) {
                newFileMkr.mkdirs();
            }

            /**
             *  创建图片
             *  图片的路径：E:/NoteStudy/upload/image/2024/04/08/xxx.jpg
             */
            File newFile = new File(path + dir + fileUUID);
            // 生成新文件
            file.transferTo(newFile);
            /**
             * 生成图片的访问地址
             * 协议 :// ip地址 ：端口号 / 文件目录(/image/2024/04/08/xxx.jpg)
             */
            String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/image/" + dir + fileUUID;
            // 将图片访问地址返回给前端
            return new Result("上传成功", true, url);
        } catch (Exception e) {
            // 处理出错
            return new Result("上传失败", false, "");
        }
    }
}

如上图所示：图片上传成功后，会将图片保存在本地的"E:/NoteStudy/upload/image/2024/04/08/图片名称.图片后缀名"。(ps:今天是2024年4月8日)。

我们需要添加一个返回值类，用于返回图片上传后的访问地址

/**
 * 返回值类
 */
public class Result {
    // 操作描述
    private String message;
    // 是否成功
    private Boolean success;
    // 返回的数据
    private Object data;

    public Result() {
    }

    public Result(String message, Boolean success, Object data) {
        this.message = message;
        this.success = success;
        this.data = data;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Boolean getSuccess() {
        return success;
    }

    public void setSuccess(Boolean success) {
        this.success = success;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}

编写静态资源映射,新建一个IntercepterConfig文件

@Configuration
public class InterceptorConfig implements WebMvcConfigurer {


    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

        String path = "E:/NoteStudy/upload/image/";

        /**
         * 配置静态资源映射
         *      因为我们图片上传后，会返回一个图片资源的访问地址。
         *      但是这个地址不是我们文件的存储地址，我们需要通过url地址访问来找到对应的图片资源
         *      在返回值处理时，我们统一为：端口地址+/image+/日期+/文件名
         *      所以，每当请求资源路径为'/image'开头，就映射到本机的“E:/NoteStudy/upload/image/”文件夹下方
         *      这样就能直接在浏览器上通过接口返回的url地址进行访问
         */
        registry.addResourceHandler("/image/**")
                .addResourceLocations("file:" + path);
    }
}

使用api调试工具进行测试

点击发送后，得到后端返回的文件访问地址。后续在浏览器搜索栏便可直接访问

编写ElementUi上传图片

这里需要一个准备好的vue2项目。

进入ElementUi官网（vue2），使用“用户头像上传”组件。

<template>
  <el-upload
    class="avatar-uploader"
    action="http://localhost:8081/file/upload"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = file.response.data
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>

用户上传效果

注意：

1.   如果上传接口报错，考虑如下几个原因：
   1. 如若是前后端分离项目，考虑是否进行跨域配置
   2. 后端接口的路径是否正确，接口参数名是否是'file'