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

绝地灬酷狼 2023-10-15 15:39 43阅读 0赞

今日记录通过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，替代上述后端url
            pathRewrite: {
              '^/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.jpc
            String originalFilename = file.getOriginalFilename();
            // 获取文件类型（jpg、png）  .jpc
            String 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();
            }
        }
    
    
    }

![ad2152fead2a4de5a3af27f88bcf9e1e.png][]

**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>

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

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

具体接受结果。

![ed574a6bf990493f808252d0dd12edbb.png][]

以上，我们可以2种方式，拿到图片url:

1.  获取blob,url,但是一刷新图片会消失,因为**blob url表示的图片是在浏览器内存中,而不是存储在硬盘上。**
2.   **利用images/ + 图片名字.jpg**

![20e9956100b24706accf75c0804185ca.png][]

**具体就是： 我们后端缓存路径就是,vue项目中的public/images文件夹。**

为什么这样使用呢？

浅谈一下：

1.经过webpack打包的vue项目结构会发生改变，我们原有的图片路径会失效。

2.public文件下，相当于是静态资源，不会经过webpack打包。

3.vue对于静态路径和动态路径(变量)的解析不一样。

具体看如下：

[vue图片路径问题\_本郡主是喵的博客-CSDN博客][vue_-CSDN]

[ad2152fead2a4de5a3af27f88bcf9e1e.png]: https://img-blog.csdnimg.cn/ad2152fead2a4de5a3af27f88bcf9e1e.png
[ed574a6bf990493f808252d0dd12edbb.png]: https://img-blog.csdnimg.cn/ed574a6bf990493f808252d0dd12edbb.png
[20e9956100b24706accf75c0804185ca.png]: https://img-blog.csdnimg.cn/20e9956100b24706accf75c0804185ca.png
[vue_-CSDN]: https://blog.csdn.net/Qhx20040819/article/details/132655598?spm=1001.2014.3001.5502