springBoot 上传到图片本地并且配置映射地址

html 代码:

 <form id="addCard" class="form-horizontal"    method="post"  enctype="multipart/form-data">
 <div class="form-group">
            <label for="email" class="col-sm-2 control-label">正面图片</label>
            <div class="col-sm-10">
                <input type="file" name="filez" id="filez"/>
            </div>
        </div>
        <div class="form-group">
            <label for="email" class="col-sm-2 control-label">侧面图片</label>
            <div class="col-sm-10">
                <input type="file" name="filec" id="filec"/>
            </div>
        </div>
        <div class="form-group">
            <label for="email" class="col-sm-2 control-label">反面图片</label>
            <div class="col-sm-10">
              <input type="file" name="filef" id="filef"/>
            </div>
        </div>
        
        <div class="form-group">
            <label for="email" class="col-sm-2 control-label">宣传图片</label>
            <div class="col-sm-10">
              <input type="file" name="filex" id="filex"/>
            </div>
        </div> 
        <div class="form-group">
            <label for="email" class="col-sm-2 control-label">视频</label>
            <div class="col-sm-10">
              <input type="file" name="filev" id="filev"/>
            </div>
        </div> 
    <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">                                   
              <input type="button" id ="adduserbutton" value="添加" class="btn btn-info" /> &nbsp;&nbsp;
              <a  th:href="@{/cards}" class="btn btn-info">返回</a>
               <div id="alteraddMsg"></div>
            </div>
        </div>

js:

	$('#adduserbutton').click(function() {
	
	  
	    var filev=$("#filev").val(); //价格
	    var filec=$("#filec").val(); //价格
	    var filef=$("#filef").val(); //价格
	    var filez=$("#filez").val(); //价格
	    var filex=$("#filex").val(); //价格
	 
	    if($.x.isEmpty(filez)){
	    	alert("请上传卡片正面图片");
	    	return  false;
	    }
	    if($.x.isEmpty(filef)){
	    	alert("请上传卡片反面图片");
	    	return  false;
	    }
	    if($.x.isEmpty(filec)){
	    	alert("请上传卡片侧面图片");
	    	return  false;
	    }
	    if($.x.isEmpty(filex)){
	    	alert("请上传卡片宣传图片");
	    	return  false;
	    }
	    
	    if($.x.isEmpty(filev)){
	    	alert("请上传图片视频");
	    	return  false;
	    }else{
	    	var filevaa=filev.indexOf("."); 
		    var  filevhz=filev.substring(filevaa); 
		     if(filevhz!=".mp4"){                         //根据后缀,判断是否符合格式
		    	  alert("视频仅支持MP4格式,重新选择!"); 
		          document.getElementById('filev').value="";  // 不符合,就清除,重新选择
		          return false;   
		    }else{
		    	if(getFileSize("filev")>10){
		    		alert("文件不能大于10M!");
		    		return false;
		    	}
		    }
	    }
	    var formData = new FormData($("#addCard")[0]);
	    $('#adduser').submit({
	    		   url:"/card/addCard", 
	    		   type:"post", 
	    		   data:formData, 
	    		   processData:false, 
	    		   contentType:false, 
	    		   success:function(result){ 
	    			   if (result.code == '0000') {
	                       alert("添加成功");
	                       window.location.href = "/cards";
	                   };
	                   if(result.code == '9999'){
	                	   alert("商品编号已存在");
	                	   return;
	                   }
	    		   },
	    		   error:function(err){ 
	    		    alert("网络连接失败,稍后重试",err); 
	    		   } 
		});
	});

ctroller:

       @Autowired
       private CuCardService cuCardService;
       //上传真实地址
       @Value("${file.uploadFolder}")  
       private String uploadFolder;
       //映射地址
       @Value("${file.url}")
       private String url;
       
       @Value("${wpost}")  
       private String wpost;
       @RequestMapping(value = "/card/addCard", method = RequestMethod.POST)
	   @ResponseBody
	   public Map<String, Object> addCardAjax( 
			   @RequestParam(value = "filez", required = false) MultipartFile filez,
			   @RequestParam(value = "filec", required = false) MultipartFile filec,
			   @RequestParam(value = "filef", required = false) MultipartFile filef,
			   @RequestParam(value = "filex", required = false) MultipartFile filex,
			   @RequestParam(value = "filev", required = false) MultipartFile filev,
			   HttpServletRequest request, Model model,HttpSession session) throws Exception {
    	   String cid = request.getParameter("cid");
    	   Map<String, Object> b = new HashMap<String, Object>();
    	   CuCard cr = cuCardService.selectCardByCid(cid);
    	   if(null!=cr) {
    		   b.put("code", "9999");
    		   return  b;
    	   }
    	   
    	   //获取本机ip
    	   String ip = IpUtil.getIp(request);
    	   //拼装地址前缀  http://localhost:8081/+staticAccessPath+/+图片名称
    	    String qurl = FileUtil.getUrl(ip, wpost, url);
    	  
    	
    	   
           String filezurl = FileUtil.uploadFile(uploadFolder, filez);
           String filecurl = FileUtil.uploadFile(uploadFolder, filec);
           String filefurl = FileUtil.uploadFile(uploadFolder, filef);
           String filexurl = FileUtil.uploadFile(uploadFolder, filex);
           String filevurl = FileUtil.uploadFile(uploadFolder, filev);
           
            //添加到实体类
		    CuCard card=new CuCard();
		
		    card.setCardZphoto(qurl+filezurl);
		    card.setCardFphoto(qurl+filefurl);
		    card.setCardCphoto(qurl+filecurl);
		    card.setCardXphoto(qurl+filexurl);
		    card.setCrstatus(Status.NORMAL);
		    card.setCts(new Date());
		    card.setUcts(new Date());
		    card.setCardVideo(qurl+filevurl);
		    Map<String, Object> map = cuCardService.addCard(card);
    	    return map;
       }

utils:

package com.manage.utils;

import java.io.File;
import java.io.FileOutputStream;
import java.util.UUID;

import org.springframework.web.multipart.MultipartFile;

public class FileUtil {
	public static String  uploadFile(String path, MultipartFile file) throws Exception{
	    String fileName = file.getOriginalFilename();            
 	    String suffixName = fileName.substring(fileName.lastIndexOf("."));
 	     // 文件上传后的路径
 	    fileName = UUID.randomUUID() + suffixName;
		String uppath=path+fileName;
        File targetFile = new File(uppath);
        file.transferTo(targetFile);
        return  fileName;
    }
	public static String   getUrl(String ip,String wpost,String staticAccessPath) {
		String url="http://"+ip+":"+wpost+staticAccessPath;
		return  url;
	}
	
}

application.properties:

file.staticAccessPath=/upload/**
#file.uploadFolder=/root/uploadFiles/
file.uploadFolder=D://upload/
file.url=/upload/

#配置上传文件的大小
spring.servlet.multipart.max-file-size = 10Mb  
spring.servlet.multipart.max-request-size=100Mb 

server.servlet.session.timeout = 3600

application-dev.yml:

server:
  port: 8081
#修改端口的时候记得把下面url的端口号也改一下  
loginUrl: http://localhost:8081/index



wpost: ${server.port}
  

配置映射config:

package com;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
 
/**
 * 图片绝对地址与虚拟地址映射
 */
 
@Configuration
public class WebMvcConfig  extends WebMvcConfigurerAdapter {

    @Value("${file.staticAccessPath}")
    private String staticAccessPath;
    @Value("${file.uploadFolder}")
    private String uploadFolder;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler(staticAccessPath).addResourceLocations("file:" + uploadFolder);
    }
    
}

这样就把图片上传到D:upload里面 ,并且用成的地址就可以访问了 

附加:

  springboot图片映射基于Tomcat的临时存贮文件temp;如果十天不用,上传图片会报错,要在配置文件propertis加入:

  server.tomcat.basedir=/home/meducation/temp

例如:http://localhost:8081/upload/3f4fd312-2094-440c-821a-707f477f5508.jpg

 

注意上传文件的大小这个可以在js 配置也可以在application.properties配置

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值