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

这篇具有很好参考价值的文章主要介绍了springboot + vue + elementui — upload解决跨域、实现图片上传。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

至于为什么会有跨域这个问题?

跨域问题确实是由Web浏览器的同源策略引起的。同源策略是浏览器的一项安全机制,它限制了从一个源加载的文档或脚本如何与来自其他源的资源进行交互。

同源策略要求在以下三个方面完全匹配时才被认为是同源

  1. 协议(Protocol):两个页面的协议必须相同(如都是http或https)。
  2. 域名(Domain):两个页面的域名必须相同,包括子域名(如example.com和www.example.com被视为不同的域名)。
  3. 端口号(Port):两个页面的端口号必须相同(如果指定了端口号)。

为什么后端服务跟后端服务的交互,没有跨域;而浏览器和服务器的交互有?

因为,后端服务之间不存在同源策略的限制。

另外,我们通常前端向后端的通信请求,一般依赖的是浏览器的通信API来完成的,当我们请求时,浏览器会检测我们请求的url是否与当前存在跨域问题。

解决跨域:

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

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

vue解决跨域

在vue.config.js文件中配置

module.exports = {
    devServer: {
        proxy: {
            '/api': { // 请求的代称,写在Axios里的BaseUrl
                target: 'http://localhost:8088', // 真实请求URl
                ws: true,
                changeOrigin: true, // 允许跨域
                pathRewrite: { //替换,通配/api的替换成对应字符
                //     /* 重写路径,当我们在浏览器中看到请求的地址为:http://localhost:8080/api/core/getData/userInfo 时
                //       实际上访问的地址是:http://localhost:8088/core/getData/userInfo,因为重写了 /api
                //      */
                    '^/api': '' //当你的接口中没有/api字眼时,采用这种,直接替换成空即可
                //     '^/api': '/api'   //当你的接口中刚好有/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();
        }
    }


}

 springboot + vue + elementui — upload解决跨域、实现图片上传,Vue,vue.js,elementui,前端

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

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


        // 获得上传图片的url
        handleAvatarSuccess(res, file) {
            console.log(file, res);
            this.infoForm.avatar = 'images/' + res.data

            // 拿到二进制数据,是blob类型,存储到浏览器内存中,一刷新数据会消失
            // console.log("imgUrl:", URL.createObjectURL(file.raw));
        },

具体接受结果。 

springboot + vue + elementui — upload解决跨域、实现图片上传,Vue,vue.js,elementui,前端

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

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

springboot + vue + elementui — upload解决跨域、实现图片上传,Vue,vue.js,elementui,前端

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

为什么这样使用呢?

浅谈一下:

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

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

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

具体看如下:

vue图片路径问题_本郡主是喵的博客-CSDN博客文章来源地址https://www.toymoban.com/news/detail-693817.html

到了这里,关于springboot + vue + elementui — upload解决跨域、实现图片上传的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ant-design-vue中upload上传图片、视频实现预览功能

    有没有小伙伴在使用ant-design-vue的upload组件时,发现api文档在图片预览功能的介绍寥寥无几,而且也没提供视频预览的demo,在实际开发中碰到相应的需求直挠头~~~~,别急,下面来给大家分享一个我自己封装的upload组件,符合需求可以直接在项目中放到组件目录调用。 templat

    2024年02月12日
    浏览(45)
  • vue+ElementUI实现点击图片预览大图和预览视频

    最近遇到一个需求: 在表格中实现预览图片和查看视频 预览图片功能: 如下,是材料一栏的代码 在 data 中定义: methods 中: style 中: 预览图片的功能就完成了. 接下来是查看视频: 安装 vue-video-player 在 main.js 中: 在写的vue页面中引入: 当时在 main.js 中引入后,发现这个插件没效果,然后

    2023年04月08日
    浏览(51)
  • vue项目跨域问题(图片跨域)devServer.proxy代理失效时,nginx反向代理解决跨域问题

    ​ 本篇文章主要记录个人在公司项目开发中所遇问题,主要内容:在vue项目的开发中图片所存的服务器/端口号和项目所在的服务器/端口号不同,出现了跨域问题的保错。 ​ 如果文章有歧义,请各位大佬指出,避免误导更多的人!! Bug起因 ​ 在vue项目的开发中图片所存的

    2024年02月15日
    浏览(46)
  • Vue+element Upload利用http-request实现第三方地址图片上传

    Vue + element (el-upload)中的 :http-request 图片上传 java后端上传接口,利用 OSS 存储图片 postman测试 图片上传功能及方法 对比: 服务端签名后直传 使用element UI 的el-upload实现第三方地址图片上传,替换原来的action方法 直接上传方法如下:上传图片根据action地址请求后获取到图片u

    2023年04月26日
    浏览(43)
  • 解决SpringBoot和前端Vue的跨域问题

    一、为什么会出现跨域问题           出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同

    2024年02月04日
    浏览(84)
  • Vue+elementUI中的el-upload实现上传文件给后端,限制上传文件的格式、文件的大小、文件的数量,将表单和Excel文件一起提交给后端

    需求:1.表单输入信息 2.上传Excel附件 3.下载附件模板 4.限制上传文件的格式、文件的大小、文件的数量 5.将表单和Excel文件一起提交给后端 效果图: 样式部分 data部分代码 method中的代码

    2024年02月12日
    浏览(60)
  • uniApp 封装Upload组件实现图片和视频上传,解决官方api单一上传问题

     uniapp 官方api没有同时上传图片和视频的组件,所以就只能自己做了,在此记录下! 这里之所以循环一个一个上传是因为,我是用于小程序端的,目前uniapp不支持微信小程序以文件列表形式上传, filePath: item, //改为files可实现一次上传多个文件,仅App、H5( 2.6.15+)支持 具体

    2024年02月14日
    浏览(42)
  • 基于Java+SpringBoot+vue+elementui图书商城系统设计实现

    博主介绍 : ✌ 全网粉丝20W+,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ 🍅 文末获取联系 🍅 精彩专栏 推荐订阅 👇🏻👇🏻👇🏻👇🏻  java项目精品实战案例

    2024年01月21日
    浏览(70)
  • Springboot + Vue ElementUI 实现MySQL&&Postgresql可视化

    PostgreSQL教程--实现类似于MySQL的show create table功能实现见末尾 效果如图: DB连接配置维护: Schema功能:集成Screw生成文档,导出库的表结构,导出表结构和数据  表对象操作:翻页查询,查看创建SQL,生成代码 可以单个代码文件下载,也可以全部下载(打成zip包下载返回)

    2024年02月12日
    浏览(41)
  • vue实战--vue+elementUI实现多文件上传+预览(word/PDF/图片/docx/doc/xlxs/txt)

        最近在做vue2.0+element UI的项目中遇到了一个需求:需求是多个文件上传的同时实现文件的在线预览功能。需求图如下:     看到这个需求的时候,小栗脑袋一炸。并不知道该如何下手,之前的实践项目中也并没有遇到相似的功能。因此也废了一番功夫想要实现这样一个

    2024年01月23日
    浏览(82)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包