springboot +vue +element-ui实现头像上传并回显

好的，这是一个比较常见的需求，我可以为您提供一个大致的实现思路。

前端部分：

1. 在 Vue 组件中引入 ElementUI 的 Upload 组件，并设置好上传路径、上传成功后的回调函数等属性。
2. 设置一个 img 标签用于显示上传后的头像，在回调函数中将上传后的图片地址传给 img 标签的 src 属性，即可实现头像回显。

后端部分：

1. 在 Spring Boot 中编写一个接收图片上传的接口，使用 @PostMapping 注解标注。
2. 在接口中使用 MultipartFile 类型的参数接收上传的文件。
3. 将文件保存到服务器指定的目录中，并返回图片的访问路径给前端。

需要注意的是，为了保证图片上传的安全性，需要在后端对上传的文件进行校验，并设置上传的文件大小限制等措施。

希望这个思路对您有所帮助，如果您需要更具体的代码实现，可以参考 ElementUI 官方文档和 Spring Boot 官方文档。

相关问题

springboot+vue头像上传回显

要实现Spring Boot Vue头像上传并回显，可以按照以下步骤进行操作。

1. 前端页面实现图片上传

在Vue组件中添加一个图片上传组件，使用element-ui的上传组件（el-upload）。具体代码如下：

<template>
  <el-upload
    class="avatar-uploader"
    action="/api/upload"
    :show-file-list="false"
    :on-success="handleSuccess"
    :before-upload="beforeUpload">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  methods: {
    beforeUpload(file) {
      // 限制文件类型和大小
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!')
        return false
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      return true
    },
    handleSuccess(response) {
      if (response.code === 200) {
        this.imageUrl = response.data
        this.$emit('update:avatar', response.data) // 通知父组件更新头像
      } else {
        this.$message.error(response.msg)
      }
    }
  }
}
</script>

<style scoped>
.avatar-uploader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f5f5f5;
}
.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}
</style>

在上传图片前，使用beforeUpload方法对文件类型和大小进行限制。在上传成功后，将服务器返回的图片地址保存到imageUrl中，并通过$emit方法通知父组件更新头像。

2. 后端实现图片上传

在Spring Boot中实现文件上传需要使用MultipartFile类型接收前端传来的文件。具体代码如下：

@RestController
@RequestMapping("/api")
public class FileUploadController {
    @Value("${file.upload.path}")
    private String filePath; // 文件保存路径

    @PostMapping("/upload")
    public Result upload(@RequestParam("file") MultipartFile file) {
        if (file.isEmpty()) {
            return Result.fail("上传失败，请选择文件");
        }
        String fileName = file.getOriginalFilename();
        String suffix = fileName.substring(fileName.lastIndexOf("."));
        String newFileName = UUID.randomUUID().toString() + suffix;
        File dest = new File(filePath + newFileName);
        try {
            file.transferTo(dest);
            return Result.success("上传成功", "/uploads/" + newFileName);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return Result.fail("上传失败");
    }
}

在文件上传接口中，通过@Value注解从配置文件中读取文件保存路径，然后使用MultipartFile类型接收前端传来的文件。接收到文件后，使用UUID生成新的文件名，将文件保存到指定路径，并返回服务器存储的文件地址。

3. 更新用户头像

在Vue组件中，通过接收父组件传来的用户信息，将头像地址赋值给imageUrl。在头像上传成功后，通过$emit方法通知父组件更新头像。具体代码如下：

<template>
  <div>
    <avatar-upload :avatar="user.avatar" @update:avatar="updateAvatar"></avatar-upload>
    <el-button type="primary" @click="updateUser">更新用户信息</el-button>
  </div>
</template>

<script>
import AvatarUpload from '@/components/AvatarUpload.vue'

export default {
  components: {
    AvatarUpload
  },
  props: {
    user: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      form: {
        id: '',
        username: '',
        password: '',
        nickname: '',
        avatar: ''
      }
    }
  },
  created() {
    this.form = { ...this.user }
  },
  methods: {
    updateAvatar(avatar) {
      this.form.avatar = avatar
    },
    updateUser() {
      // 调用后端接口更新用户信息
    }
  }
}
</script>

在更新用户信息的方法中，调用后端接口将用户信息更新到数据库中。

@RestController
@RequestMapping("/api")
public class UserController {
    @Autowired
    private UserService userService;

    @PostMapping("/updateUser")
    public Result updateUser(@RequestBody User user) {
        userService.updateUser(user);
        return Result.success("更新成功");
    }
}

在UserService中实现更新用户信息的方法。

@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;

    @Override
    public void updateUser(User user) {
        userMapper.updateById(user);
    }
}

以上就是Spring Boot Vue头像上传并回显的实现方法。

springBoot+vue 图片上传及回显的代码实现

后端代码实现：

1.引入相关依赖

<!-- 文件上传 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.4</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>2.6</version>
</dependency>

2.配置文件上传相关信息

# 文件上传限制
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB
spring.servlet.multipart.enabled=true

3.编写文件上传接口

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

    @PostMapping("/upload")
    public String upload(@RequestParam("file") MultipartFile file) throws IOException {
        if (file.isEmpty()) {
            return "文件为空";
        }

        String fileName = file.getOriginalFilename();
        String filePath = "D:\\temp\\";
        File dest = new File(filePath + fileName);
        file.transferTo(dest);

        return "上传成功";
    }
}

前端代码实现：

1.安装 axios 和 element-ui

npm install axios element-ui --save

2.编写文件上传组件

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/api/file/upload"
      :auto-upload="false"
      :on-change="handleChange"
    >
      <el-button slot="trigger" type="primary">选取文件</el-button>
      <el-button v-if="imageUrl" type="success" @click="handleUpload">上传到服务器</el-button>
      <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过10MB</div>
    </el-upload>
    <img v-if="imageUrl" :src="imageUrl" style="max-width: 100%;">
  </div>
</template>

<script>
import axios from 'axios';
import { Message } from 'element-ui';

export default {
  data() {
    return {
      imageUrl: '',
      file: null,
    };
  },
  methods: {
    handleChange(file) {
      this.file = file.raw;
      this.imageUrl = URL.createObjectURL(this.file);
    },
    handleUpload() {
      const formData = new FormData();
      formData.append('file', this.file);

      axios.post('/api/file/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      }).then(() => {
        Message.success('上传成功');
      }).catch(() => {
        Message.error('上传失败');
      });
    },
  },
};
</script>

至此，图片上传及回显的代码实现就完成了。