elementui图片上传到后端

### 使用ElementUI实现图片上传到后端服务器

#### 一、前端部分

为了实现图片上传功能，前端采用Element UI中的`el-upload`组件。此组件提供了丰富的配置选项来满足不同的业务场景需求。

在Vue项目中安装并引入Element UI之后，在页面模板内声明如下代码片段用于展示文件选择按钮以及预览已选文件：

<template>
  <div class="upload-demo">
    <!-- :action 表示接收上传请求的服务地址 -->
    <el-upload
      action="/api/upload"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :before-upload="beforeAvatarUpload"
      :headers="myHeaders"
      :data="{ userId: '123' }" >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      myHeaders: { token: localStorage.getItem('token') }
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    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>

上述代码设置了上传接口路径为`/api/upload`，并通过`:headers`属性传递了认证令牌给服务端验证身份合法性；同时利用`:data`附加额外参数随同文件一起发送给后台[^1]。

#### 二、后端部分

假设后端采用了Spring Boot作为开发框架，则可以在控制器层编写相应的API接口用来接受来自客户端发来的POST请求，并保存接收到的文件对象至指定位置或数据库中。

下面是一个简单的Java类方法实例，它负责处理从前端传入的数据流并将图像存储起来：

@RestController
public class FileController {

  @PostMapping("/api/upload")
  public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file,@RequestParam String userId){
    
    try{
       // 获取原始文件名
       String originalFilename=file.getOriginalFilename();
       
       // 设置新的文件名称防止重复覆盖
       String newFileName= UUID.randomUUID().toString()+"_"+originalFilename;
       
       // 定义要保存的目标目录
       Path targetLocation = Paths.get(UPLOAD_DIR).resolve(newFileName);

       Files.copy(file.getInputStream(),targetLocation,StandardCopyOption.REPLACE_EXISTING);
      
       return ResponseEntity.ok("success");
     }catch (IOException e){
         logger.error(e.getMessage());
         return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body(null);
     }

  }
}

这段逻辑主要完成了对上传文件的安全校验、重命名操作以及最终写入磁盘的过程。注意这里还需要考虑安全性方面的问题比如设置合理的最大允许尺寸限制等措施以保护服务器免受恶意攻击[^3]。