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

今日记录通过elementui上传时得到的问题。

我们在本地部署的服务,前端服务请求后端接口,存在跨域问题，

1.可以利用springboot解决跨域问题，这里不列举

2.利用vue配置进行反向代理。

vue解决跨域

在vue.config.js文件中配置

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({transpileDependencies: true,// 跨域请求devServer: {port: 8080,// 开启代理proxy: {'/api': {// 后端地址target: 'http://localhost:8081/',// 允许跨域changeOrigin: true,// 路径重写:我们可以应/api，替代上述后端urlpathRewrite: {'^/api': '/'}}}}})

图片上传

java代码如下:

@RestController
@RequestMapping("/common")
@Api(tags = "文件controller")
public class CommonController {@Value("${reggie.path}")private String basePath;@ApiOperation("文件上传")@PostMapping("/upload")public Result upLoad(@RequestParam("file") MultipartFile file) {// 原始文件名   abc.jpcString originalFilename = file.getOriginalFilename();// 获取文件类型（jpg、png）  .jpcString suffix = originalFilename.substring(originalFilename.lastIndexOf("."));// 使用UUID重新生成文件名，防止文件名重复String fileName = UUID.randomUUID() + suffix;// 创建目录File dir = new File(basePath);if(!dir.exists()) {dir.mkdirs();}try {file.transferTo(new File(basePath + fileName)); // 当前目录下，生成图片，我们将这个路径返回} catch (IOException e) {e.printStackTrace();}return Result.success("文件上传成功", fileName);}@ApiOperation("文件下载")@GetMapping("/download")public void downLoad(String name, HttpServletResponse response) {try {// 输入流，通过输入流读取文件内容FileInputStream fileInputStream = new FileInputStream(new File(basePath + name));// 输出流，通过输出流将文件写回浏览器ServletOutputStream outputStream = response.getOutputStream();response.setContentType("image/jpeg");int len = 0;byte[] bytes = new byte[1024]; // 缓存while ((len = fileInputStream.read(bytes)) != -1) {outputStream.write(bytes, 0, len);outputStream.flush();}//关闭资源outputStream.close();fileInputStream.close();} catch (Exception e) {e.printStackTrace();}}}

vue代码如下:

 <el-upload action="/api/common/upload" //后端请求上传图片接口list-type="picture-card" :show-file-list="false" // 开启上传图片列表:on-success="handleAvatarSuccess" // 成功响应后调用api,主要是这个:before-upload="beforeAvatarUpload" //上传之前调用api><i class="el-icon-plus"></i>
</el-upload>

  <img :src="infoForm.avatar" alt="编辑头像" class="update-img">

我们后端指定上传图片路径如上，当我们点击上传图片时，请求后端接口，图片会缓存到上述位置 ,并且会被如下函数接收到。

// 获得上传图片的urlhandleAvatarSuccess(res, file) {console.log(file, res);this.infoForm.avatar = 'images/' + res.data// 拿到二进制数据,是blob类型，存储到浏览器内存中,一刷新数据会消失// console.log("imgUrl:", URL.createObjectURL(file.raw));},

具体接受结果。