springboot + vue + elementui — upload解决跨域、实现图片上传

在Spring Boot后端，你需要配置跨域允许，并且创建一个接收上传文件的控制器方法。

import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
 
@RestController
public class FileUploadController {
 
    @CrossOrigin
    @PostMapping("/upload")
    public String handleFileUpload(@RequestParam("file") MultipartFile file) {
        // 这里应该是文件上传的逻辑，比如保存文件到服务器
        // 返回文件的访问URL或其他信息
        return "File uploaded successfully: " + file.getOriginalFilename();
    }
}

在Vue前端，你可以使用Element UI的<el-upload>组件来实现文件上传。

<template>
  <el-upload
    action="http://localhost:8080/upload"
    :on-success="handleSuccess"
    :on-error="handleError"
    multiple>
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  </el-upload>
</template>
 
<script>
export default {
  methods: {
    handleSuccess(response, file, fileList) {
      console.log('File uploaded successfully:', response);
    },
    handleError(err, file, fileList) {
      console.error('Error during upload:', err);
    },
    submitUpload() {
      this.$refs.upload.submit();
    }
  }
}
</script>

确保你的Vue项目已经配置了代理，以便请求Spring Boot后端服务而不遇到跨域问题。

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/upload': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/upload': ''
        }
      }
    }
  }
}

这样就可以实现在Vue中使用Element UI的上传组件，通过CORS跨域策略上传文件到Spring Boot后端。