今日记录通过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));},
具体接受结果。
以上，我们可以2种方式，拿到图片url:
获取blob,url,但是一刷新图片会消失,因为blob url表示的图片是在浏览器内存中,而不是存储在硬盘上。利用images/+ 图片名字.jpg
具体就是： 我们后端缓存路径就是,vue项目中的public/images文件夹。
为什么这样使用呢？
浅谈一下：
1.经过webpack打包的vue项目结构会发生改变，我们原有的图片路径会失效。
2.public文件下，相当于是静态资源，不会经过webpack打包。
3.vue对于静态路径和动态路径(变量)的解析不一样。
具体看如下：
vue图片路径问题_本郡主是喵的博客-CSDN博客
