springBoot+element-ui实现图片上传

使用element-ui + vue +springboot + mybatis-plus技术实现

1.上传图片区

 <el-form-item label="站点图片">
          <el-upload
              class="upload-demo"
              action="http://localhost:8080/upload/uploadSignle"
              :on-success="handleSuccess"
              :show-file-list="false">
            <el-button size="mini" type="primary">点击上传</el-button>
          </el-upload>
</el-form-item>

使用element-ui组件中的 <el-upload> 标签 ， 默认传的文件名是file

• class="upload-demo"：这个属性指定了组件的 CSS 类名，可以通过该类名来自定义组件的样式。

• action="http://localhost:8080/upload/uploadSignle"：这是上传的目标地址，即文件将会被上传到该 URL 对应的服务端接口。在这个例子中，文件将被上传到 http://localhost:8080/upload/uploadSignle。

• :on-success="handleSuccess"：这是一个事件监听器，用于监听文件上传成功的事件。:on-success 是 Vue.js 中绑定事件的一种方式，它将 handleSuccess 方法与上传成功的事件进行关联。当文件成功上传后，handleSuccess 方法将被调用。

• :show-file-list="false"：这个属性用于控制是否显示已上传文件列表。在这里，设置为 false 表示不显示已上传文件列表。

• <el-button size="mini" type="primary">点击上传</el-button>：这个部分包含了一个按钮元素，用户点击该按钮时将触发文件选择框或上传动作

2.图片展示区

      <el-table-column
          type="file"
          prop="stationPicture"
          label="站点图片"
          enctype="multipart/form-data"
          align="center"
          width="150"
      >
        <template slot-scope="scope">
          <img v-if="scope.row.stationPicture" :src="scope.row.stationPicture"
               style="max-width: 100px; max-height: 100px;"/>
          <el-tag type="info" v-else>无图片</el-tag>
        </template>
      </el-table-column>

注意：必须使用<template> 插槽，保证每一行的作用域 ， 绑定到表格的数据

3.发送请求

//上传成功触发的函数
handleSuccess(response, rowData) {
  // 上传成功后的处理逻辑
  // response 为返回的图片路径   rowData返回的图片信息
  console.log('上传成功', response, rowData);
  // 在这里可以根据后端返回的数据进行进一步处理
  this.station.stationPicture = "http://localhost/" + response
  this.$message.success("图片上传成功")
},

当上传成功时候，调用此函数

4. 后端处理

@RequestMapping("/uploadSignle")
public String uploadSignle(@RequestParam("file") MultipartFile files) throws Exception{
    //单文件上传
    String fileName = files.getOriginalFilename();
    File dest = new File("d:/temp/2206a/" + fileName);
    if (!dest.getParentFile().exists()) {
        dest.getParentFile().mkdirs();
    }
    files.transferTo(dest);
    return fileName;
}

需要的file文件要跟前端传过来的值相同

上传完毕之后，返回图片的文件名。

上传到本地的D:/temp/2206a/ 的本地文件夹 

5.配置Nginx服务器

在本地简单配置了一个Nginx 服务器，相当于把图片放到了服务器上，在将来在项目打包在服务器上进行部署，不至于出现上传的图片不显示的情况（配置Nginx服务器使用可视化工具--小皮）

具体配置如下：

接下来需要配置一个可以直接访问本地图片的网站： 

        配置完以后，你的本地文件夹中就会有两个文件

就直接可以在浏览器上访问你的本地图片辣（本地中必须要有哦）