element-ui的上传组件上传图片用axios请求传后端

可以参考以下代码实现：

1. 引入axios和element-ui的上传组件

import axios from 'axios'
import { Upload } from 'element-ui'

2. 在template中使用上传组件

<el-upload
  action=""
  :on-success="handleSuccess"
  :before-upload="beforeUpload"
  :file-list="fileList"
>
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
</el-upload>

3. 在methods中定义上传前的校验和上传成功后的处理函数

methods: {
  // 上传前的校验
  beforeUpload(file) {
    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
    const isLt2M = file.size / 1024 / 1024 < 2

    if (!isJPG) {
      this.$message.error('上传图片只能是 JPG/PNG 格式!')
      return false
    }
    if (!isLt2M) {
      this.$message.error('上传图片大小不能超过 2MB!')
      return false
    }
    return true
  },

  // 上传成功后的处理函数
  handleSuccess(response, file, fileList) {
    if (response.code === 200) {
      this.$message.success('上传成功')
      const imageUrl = response.data.imageUrl // 获取后端返回的图片地址
      // 这里可以将图片地址保存到数据库或者显示在页面上
      console.log(imageUrl)
    } else {
      this.$message.error('上传失败')
    }
  }
}

4. 在handleSuccess中使用axios发送上传请求

handleSuccess(response, file, fileList) {
  if (response.code === 200) {
    this.$message.success('上传成功')
    const imageUrl = response.data.imageUrl // 获取后端返回的图片地址

    // 使用axios发送上传请求
    const formData = new FormData()
    formData.append('file', file)
    axios.post('backend/upload/image', formData).then(res => {
      if (res.data.code === 200) {
        console.log('上传成功')
      } else {
        console.log('上传失败')
      }
    })

    // 这里可以将图片地址保存到数据库或者显示在页面上
    console.log(imageUrl)
  } else {
    this.$message.error('上传失败')
  }
}

5. 在后端接口中处理上传的文件

@PostMapping("/upload/image")
public Response uploadImage(@RequestParam("file") MultipartFile file) {
    if (file.isEmpty()) {
        return Response.fail("上传失败，请选择文件");
    }

    String fileName = file.getOriginalFilename();
    String suffixName = fileName.substring(fileName.lastIndexOf("."));
    String newFileName = UUID.randomUUID().toString() + suffixName;
    String filePath = "D:/image/"; // 这里可以根据实际情况修改图片存储路径
    File dest = new File(filePath + newFileName);

    try {
        file.transferTo(dest);
        return Response.success("上传成功", newFileName);
    } catch (IOException e) {
        e.printStackTrace();
    }
    return Response.fail("上传失败");
}