ssm框架图片上传到本地并写入数据库

朴灿烈づ我的快乐病毒、 2024-04-18 10:33 54阅读 0赞

## ssm框架图片上传到本地 ##

注：这里ssm框架搭建就不说了，直接来讲图片上传功能

先上图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70 1][]

1、在pom.xml文件下引入所需要的包。

<dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.3.3</version>
    </dependency>
    <dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.4</version>
    </dependency>

2、在spring-mvc.xml 也就是配置servlet的地方配置 文件解析器

3、创建图片类

package com.lzw.bean;
    
    public class Product {
        private Integer pid;
        private String pimage;
        public Integer getPid() {
            return pid;
        }
        public void setPid(Integer pid) {
            this.pid = pid;
        }
        public String getPimage() {
            return pimage;
        }
        public void setPimage(String pimage) {
            this.pimage = pimage;
        }
        @Override
        public String toString() {
            return "Product [pid=" + pid + ", pimage=" + pimage + "]";
        }
    	public Product(String pimage) {
    		super();
    		this.pimage = pimage;
    	}
    }

4、创建对应的Dao接口

package com.lzw.dao;
    
    import java.util.List;
    
    import com.lzw.bean.Product;
    
    public interface ProductDao {
    	    //保存商品
    	  public  void add(Product product) ;
    	    //查询商品
    	  public  List<Product> list();
    }

5、创建对应的Mapper.xml

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    	<mapper namespace="com.lzw.dao.ProductDao">
    		  
        <insert id="add" parameterType="com.lzw.bean.Product" >
            insert into product(pimage) values (#{pimage})    
        </insert> 
        
        
        <select id="list" resultType="com.lzw.bean.Product">
            select * from product
        </select> 
    	
    	</mapper>

6、创建对应的Service类

package com.lzw.service;
    
    import java.util.List;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import com.lzw.bean.Product;
    import com.lzw.dao.ProductDao;
    
    @Service
    public class ProductService {
    	@Autowired
        private ProductDao productDao;
        
        public List<Product> list() {
            
            return productDao.list();
        }
    
        public void add(Product product) {
        	productDao.add(product);
        }
    }

7、创建对应的Controllor处理方法

public Msg oneFileUpload(  
                @RequestParam("file") CommonsMultipartFile file,  
                HttpServletRequest request, ModelMap model) throws IOException {  
      
            // 获得原始文件名  
            String fileName = file.getOriginalFilename();
            
            System.out.println("原始文件名:" + fileName);  
      
            
         // 新文件名  
            String newFileName = "test.jpg";  
      
            // 获得项目的路径  
            //ServletContext sc = request.getSession().getServletContext();  
            // 上传位置  
           // String path = sc.getRealPath("/img") + "/"; // 设定文件保存的目录  
            String path = "D:/photo/lzw";
            File f = new File(path);  
            if (!f.exists())  
                f.mkdirs();  
            if (!file.isEmpty()) {  
                try {  
                    FileOutputStream fos = new FileOutputStream(path +'/'+ newFileName);  
                    InputStream in = file.getInputStream();  
                    int b = 0;  
                    while ((b = in.read()) != -1) {  
                        fos.write(b);  
                    } 
                    fos.close();  
                    in.close();  
                } catch (Exception e) {  
                    e.printStackTrace();  
                }  
            }  
      
            System.out.println("上传图片到:" + path +'/'+ newFileName);  
            // 保存文件地址，用于JSP页面回显  
            model.addAttribute("fileUrl", path +'/'+ newFileName);  
            
            String src = path +'/'+ newFileName;
            Product p = new Product("/photos/"+newFileName);
            p.setPimage("/photos/"+newFileName);

8、创建前端页面来测试

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    
    
    </head>
    <body>
    	 <form id="form" method="post" enctype="multipart/form-data">
                <p>请选择要上传的文件:</p>
                <input id="file" name="file" type="file" multiple="multiple"/>
                <br>
                
            </form>
           <button id ="upload" >检测</button>
     
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $("#upload").click(function () {
           var formData = new FormData($('#form')[0]);//获取表单中的文件
           //alert("666");
           //ajax请求
           $("#imglist").empty();
           $.ajax({
               url:"${WEB_PATH}/addProduct.do",//后台的接口地址
               type:"post",//post请求方式
               data:formData,//参数
               cache: false,
               processData: false,
               contentType: false,
               success:function (result) {
                   //alert("ok");
            	   var urlList = result.extend.url;
                   $.each(urlList,function(index,item){
    	            	//alert(item);
    	   				var img = $("<img></img>").attr("src",item);
    	   				var div = $("<div></div>").addClass("swiper-slide");
    	   				
       			   });
                   
               },error:function () {
                   alert("操作失败~");
               }
           })
    });
    </script>
    </body>
    </html>

9、设置路径---》双击tomcat--》点击Modules--》点击添加直接的路径 第一个是虚拟路径 第二个是本地路径 这样tomcat才能识别到本地的路径。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70 2][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a7cd0db6876f4bc991e4728e37257392.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/54e25e41e5044d688d6e089fc076dede.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190905143457356.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/203af5682a3447b4a5137849c4c684a8.png