【图片上传与图片显示】 SpringBoot ajax （跨域问题）
2024-06-05 18:07:49
<上传>
前端：
uploadImg.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title><!-- 引入bootstrap样式 --><link href="/css/bootstrap.css" rel="stylesheet"><!-- 引入bootstrap-table样式 --><link href="/css/bootstrap-table.css" rel="stylesheet"><!-- jquery --><script src="/js/jquery.min.js"></script><script src="/js/bootstrap.min.js"></script><!-- bootstrap-table.min.js --><script src="/js/bootstrap-table.js"></script><!-- 引入中文语言包 --><script src="/js/bootstrap-table-zh-CN.js"></script></head>
<body>
<div class="imageWrapper"><div class="row"><div class="col-xs-4" style="margin-top: 20px"><div><button id="selectImg" type="button" class="btnUpload"></button><input id="imagePic" name="imagePic" type="file"accept=".bmp,.jpg,.png,.jpeg,image/bmp,image/jpg,image/png,image/jpeg" style="display:none" /></div><div class="fontTip">限上传不超过10M的bmp,jpg,png,jpeg格式的图片</div><button id="uploadButton" type="button" onclick="uploadImg();">上传</button></div><div class="col-xs-8"><div class="imageShow"><img id="uploadImageShow" src="" style="weight:100px;height:100px"/></div></div></div>
</div>
</body><script type="text/javascript">var btnUploadText = '选择图片';$(document).ready(function () {$("#selectImg").text(btnUploadText)$(".imageShow").hide()$('#selectImg').click(function () {$('#imagePic').click();});$("#imagePic").on("change", function (e) {var file = e.target.files[0]; //获取图片资源var fileTypes = ["bmp", "jpg", "png", "jpeg"];var bTypeMatch = falsefor (var i = 0; i < fileTypes.length; i++) {var start = file.name.lastIndexOf(".");var fileType = file.name.substring(start + 1);if (fileType.toLowerCase() == fileTypes[i]) {bTypeMatch = true;break;}}if (bTypeMatch) {if (file.size <= 1024 * 1024 * 10) {var reader = new FileReader();reader.readAsDataURL(file); // 读取文件// 渲染文件reader.onload = function (arg) {$(".imageShow").show()$("#uploadImageShow").attr("src", arg.target.result)btnUploadText = '重新上传'$("#selectImg").text(btnUploadText)}} else {alert('仅支持不超过10M的图片');emptyImageUpload("#imagePic")$("#uploadImageShow").attr("src", "")$(".imageShow").hide()btnUploadText = '上传'$("#selectImg").text(btnUploadText)return false;}} else {alert('仅限bmp，jpg，png，jpeg图片格式');emptyImageUpload("#imagePic")$("#uploadImageShow").attr("src", "")$(".imageShow").hide()btnUploadText = '上传'$("#selectImg").text(btnUploadText)return false;}});})//清空上传图片信息function emptyImageUpload(selector) {var fi;var sourceParent;if (selector) {fi = $(selector);sourceParent = fi.parent();} else {return;}$("<form id='tempImgForm'></form>").appendTo(document.body);var tempImgForm = $("#tempImgForm");tempImgForm.append(fi);tempImgForm.get(0).reset();sourceParent.append(fi);tempImgForm.remove();}function uploadImg() {if($("#imagePic").val() != "") {//创建FormData对象var formData = new FormData();formData.append('photo', document.getElementById('imagePic').files[0]);$.ajax({type: "POST",url:"http://localhost:8080/uploadPhoto",//后台接口dataType: "json",data:formData,fileElementId:"file", // 文件的idasync: true, // 使用同步操作contentType:false, /*不可缺*/processData: false, /*不可缺*/success: function(data,status,xhr){console.log("返回码："+data.status+" code:"+data.code+" status:"+status+" xhr:"+xhr.status)if(xhr.status === 200) {alert("上传成功:"+xhr.status+" OK");}},error: function (d,status,xhr) {console.log("返回码："+d.status+" code:"+d.code+" status:"+status+" xhr:"+xhr.status)alert("上传失败："+d.status);},});} else {alert("请先选择文件");}}</script>
</html>后端
先在配置文件中设置传输文件的大小（单个文件不得大于10MB，多个文件不能大于100MB）
spring.servlet.multipart.max-file-size = 10MB
spring.servlet.multipart.max-request-size=100MBMyController.java
package com.example.demo3.controller;import com.alibaba.fastjson.JSONObject;
import com.example.demo3.dto.MyTableDTO;
import com.example.demo3.entity.User;
import com.example.demo3.service.MyService;
import com.example.demo3.util.HttpHelper;
import com.example.demo3.util.HttpHelperRequestHandler;
import com.alibaba.fastjson.JSON;import java.io.File;
import java.io.OutputStreamWriter;
import java.io.PrintWriter;
import java.net.HttpURLConnection;
import java.net.URLConnection;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;@Controller
public class MyController {@RequestMapping("/")@ResponseBodypublic String function0(){return "empty";}/*** 图片上传* @param photo* @param request* @return*/@RequestMapping(value = "/uploadPhoto", method = RequestMethod.POST)@ResponseBodypublic Map<String, String> uploadPhoto(MultipartFile photo, HttpServletRequest request,HttpServletResponse response) {Map<String, String> ret = new HashMap<String, String>();//获取文件后缀String suffix = photo.getOriginalFilename().substring(photo.getOriginalFilename().lastIndexOf(".") + 1, photo.getOriginalFilename().length());if (!"jpg,jpeg,bmp,png".toUpperCase().contains(suffix.toUpperCase())) {ret.put("type", "error");ret.put("msg", "请选择jpg,jpeg,bmp,png格式的图片！");return ret;}//存储目录String savePath = "E:/imagesFile"; File savePathFile = new File(savePath);if (!savePathFile.exists()) {//若不存在该目录，则创建目录System.out.println("若不存在该目录，则创建目录");savePathFile.mkdir();}String filename = new Date().getTime() + "." + suffix;try {//将文件保存指定目录photo.transferTo(new File(savePath + "//"+ filename));} catch (Exception e) {ret.put("type", "error");ret.put("msg", "保存文件异常！");e.printStackTrace();System.out.println("保存文件异常！");return ret;}ret.put("type", "success");ret.put("msg", "上传图片成功！");ret.put("filepath", savePath);ret.put("filename", filename);System.out.println("保存文件成功："+filename);response.setHeader("Access-Control-Allow-Origin", "*");return ret;}
}如果为了方便前端访问图片资源的话，可以改变存储路径为项目里的路径
将
//存储目录String savePath = "E:/imagesFile"; 改为
//存储目录String savePath = getUrl()+"/img/"; //C:/IDEA_Project/Pro_MyBatis3/target/classes/static/img/public static String getUrl() {String path = null;try {String serverPath= ResourceUtils.getURL("classpath:static").getPath().replace("%20"," ");path=serverPath.substring(1);//从路径字符串中取出工程路径} catch (FileNotFoundException e) {e.printStackTrace();}return path;
}"E:/a.txt" 与 "E:\\a.txt" 都是正确的写法。
为什么反斜杠要两个而正斜杠只要一个：反斜杠中第一个充当转义字符。由于
/在不同系统环境中都可以生效，所以最好使用这个
https://blog.csdn.net/piano_diano/article/details/106363592
然后前端的html文件可以在<img>内填入url，即可获得静态图片资源
<div><img id="uploadImageShow2" src="http://localhost:8080/img/blueSky.jpg" style="weight:100px;height:100px"/></div>跨域问题
跨域问题来源于JavaScript的"同源策略"，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题。
解决：
方案1：
在后端代码中加入
response.setHeader("Access-Control-Allow-Origin", "*");方案2：
给 Controller 实现接口 WebMvcConfigurer，重写addCorsMappings()
@Controller
public class MyController implements WebMvcConfigurer{@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/*").allowedOrigins("*");}}方案3：
在方法上添加注解 @CrossOrigin
@CrossOrigin@RequestMapping("/table/all")@ResponseBodypublic List<MyTableDTO> tableFindAll(){return myService.TableFindAll();
}方案4：
添加配置类
import org.springframework.context.annotation.Bean;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;/*** @author Peko*/
@Configuration
public class CorsConfig {@Beanpublic CorsFilter corsFilter(){UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.addAllowedOrigin("*"); //允许任何域名使用corsConfiguration.addAllowedHeader("*"); //允许任何头corsConfiguration.addAllowedMethod("*"); //允许任何方法（post、get等）source.registerCorsConfiguration("/**",corsConfiguration); //处理所有请求的跨域配置return new CorsFilter(source);}
}</上传>
<显示>
前端
<div><img src="http://localhost:8080/downloadPhoto/drrr.jpg"></div>后端
@Controller
public class MyController implements WebMvcConfigurer{//解决跨域问题@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/*").allowedOrigins("*");}@ResponseBody@RequestMapping(value = "/downloadPhoto/{fileN}")public String downloadPhoto(@PathVariable String fileN,HttpServletRequest request,HttpServletResponse response) throws IOException {String fileName = fileN;if(fileName!=null){String filePath = "E:/imagesFile/" + fileName;System.out.println(filePath);File file = new File(filePath);if(file.exists()){response.setContentType("application/force-download");response.addHeader("Content-Disposition","attachment;fileName="+fileName);byte[] buffer = new byte[1024];FileInputStream fis = null;BufferedInputStream bis = null;try{fis = new FileInputStream(file);bis = new BufferedInputStream(fis);OutputStream os = response.getOutputStream();int i = bis.read(buffer);while(i!=-1){os.write(buffer,0,i);i=bis.read(buffer);}return "download success";}catch(Exception e){e.printStackTrace();}finally{bis.close();fis.close();}}}return "failure";}}</显示>
参考博文：
https://www.cnblogs.com/yxmhl/p/11617497.html
https://www.cnblogs.com/lguow/p/9603626.html
http://blog.csdn.net/qq_41700374/article/details/87817197
https://www.cnblogs.com/haha12/p/10564972.html
http://baijiahao.baidu.com/s?id=1654419465068708673&wfr=spider&for=pc
【图片上传与图片显示】 SpringBoot ajax （跨域问题）相关推荐
- ajax 文件上传 跨域,FormData解决ajax上传文件的问题及ajax跨域
通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果你把表单的编码类型设置为multipart/form ...
- 菜鸟的springboot项目图片上传及图片路径分析
菜鸟的springboot项目图片上传及图片路径分析 说明 一.图片路径分析 二.实现图片上传 (1)单文件上传(非异步) (2)单文件上传(异步) 三.总结 四.更新配置文件 说明 更新时间:202 ...
- 使用vue+elementUi+springBoot实现图片上传，图片删除，图片展示
使用vue+elementUi+springBoot实现图片上传,图片删除,图片展示 环境配置 准备环境 使用软件 图片上传 图片删除 图片显示 所有代码均为参考,每个人的方法不一样,效果不一样,该代 ...
- TP5框架的多图片上传返回不显示问题
TP5框架的多图片上传返回不显示问题 今天在写接口的时候遇到了一个问题,就是前端多张图片上传,图片路径以 ' | '进行的拼接然后存储, 大概就是这个样子在jpg后面进行的一个 ' | ' 进行分割 ...
- 通过url链接将图片上传oss图片显示不完整问题
通过url链接将图片上传oss图片显示不完整问题 问题:在之前通过链接上传图片的时候,都是先获取inputStream流,然后通过available()方法获取文件大小.但是通过这种方法获取到的文件大 ...
- springboot实现图片上传和图片删除
图片上传主要将需要上传的图片上传到对应的存储地址当中,再通过url访问图片就可以了:本文存储地址在本地,如果是在服务器上,配置服务器端的地址就可以了. controller @ApiOperation ...
- java分布式实现图片上传到图片服务器
java分布式实现图片上传到图片服务器 操作步骤 第一步 第二步 第三步 第四步 第五步 第六步 代码实现 第七步 JS代码 大功告成!! 操作步骤 第一步 在页面中的form表单里面增加一个inpu ...
- java 图片服务器 上传_Java实现把图片上传到图片服务器(nginx+vsftp)
前言: 在我另一篇笔记中已经记载了如何用nginx + vsftp搭建图片服务器(请参考nginx + vsftp搭建图片服务器),并且用vsftp的客户端工具filezilla测试过已经可用.但是在 ...
- python修改图片大小为30kb_Python的Tornado框架实现图片上传及图片大小修改
图片的上传 上传图片使用了表单提交, 下面是html部分, enctype="multipart/form-data"表示不对字节进行编码,上传文件类型时需指定. input标签的 ...
- php 怎么上传图片,php怎么把图片上传到图片服务器
php怎么把图片上传到图片服务器? 图片服务器代码<?php /** * 图片服务器上传API接口 * by Zx * date 2016-04-28 */ header('Content-ty ...
最新文章
- php比较长的configure
- 数据结构----内存分配问题
- 今日头条的面试题（部分）
- boost::visit_each的用法实例
- powerpoint转换器_如何将PowerPoint演示文稿转换为主题演讲
- 华为鸿蒙mota30手机多少钱,华为Mate30系列基本确认：麒麟985、鸿蒙系统、5G，价格满意！...
- 前端学习 -- Css -- 文本标签
- 案例-热点图（CSS3）
- 图解Gram matrix
- 学习3DMAX的几点收获
- 10大H5前端ui框架,ui让你开发不愁
- 路由器有以下几种联网接口
- 51单片机模拟I2C读写M24LR04
- 智变·人工智能革新客服行业
- html制作电影宣传效果,宣传片制作有什么技巧可提高效果
- 金融魔方创始人兼CEO刘嘉：金融SaaS为中小企业赋能的机遇与挑战
- SQLPLUS登录以及切换Oracle数据库实例和用户
- Oracle安装与配置(Linux)
- can和could的用法_情态动词could的用法（包含can与could的区别）
- 常用PHP编辑器下载