新建一个tomcat服务器，spring+jersey完成上传图片的实现

Posted 2020-12-03 Programmer

万年不变开头，添加依赖

<!-- https://mvnrepository.com/artifact/com.sun.jersey/jersey-client -->
<dependency>
    <groupId>com.sun.jersey</groupId>
    <artifactId>jersey-client</artifactId>
    <version>1.19.4</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.sun.jersey/jersey-core -->
<dependency>
    <groupId>com.sun.jersey</groupId>
    <artifactId>jersey-core</artifactId>
    <version>1.19.4</version>
</dependency>

 

1、在添加页面中新增一个改变事件的按钮，因为是上传，所以该表单记得添加属性

enctype="multipart/form-data"

 <tr>
                <td width="20%" class="pn-flabel pn-flabel-h">
                    <span class="pn-frequired">*</span>
                    上传商品图片(90x150尺寸):
                </td>
                <td width="80%" class="pn-fcontent">
                    注:该尺寸图片必须为90x150。
                </td>
            </tr>
            <tr>
                <td width="20%" class="pn-flabel pn-flabel-h"></td>
                <td width="80%" class="pn-fcontent">

                    <img width="100" height="100" id="allImgUrl"/>
　　　　　　　　　　　　<!--图片保存路径（只是一个文件名）-->
                    <input type="hidden" name="imgUrl" id="path"/>
　　　　　　　　　　　　　　<!--下方添加事件-->
                    <input type="file" onchange="uploadPic()" name="pic"/>
                </td>
            </tr>

2、事件的内容为，跳转到

"/upload/uploadPic.do"

  <script type="text/javascript">
        //上传图片
        function uploadPic() {
            alert("111")
            //定义参数
            var options = {
                url: "/upload/uploadPic.do",
                dataType: "json",
                type: "post",
                success: function (data) {
                    //获得二个路径以存入数据库，下面id=path是input隐藏域，当表单提交时，会同时保存图片名称，id=allImgUrl是设置图片显示，当上传成功时，图片会显示在这里
                    //url
                    //path
                    $("#allImgUrl").attr("src", data.url);
                    $("#path").val(data.path);
                }
            };

            //jquery.form使用方式
            $("#jvForm").ajaxSubmit(options);

        }

3、编写controller

/**
 * 上传图片、商品、品牌、商品介绍
 */
@Controller
public class UploadController {
    /**
     * 图片上传
     * @param pic
     */
    @RequestMapping("/upload/uploadPic.do")
    //required=false表示不上传就报错
    public void uploadPic(@RequestParam(required = false) MultipartFile pic, HttpServletResponse response) {

        //图片名称生成策略
       DateFormat dateFormat = new SimpleDateFormat("yyyyMMddHHmmssSS");
       //图片名称的一部分
        String format = dateFormat.format(new Date());
        //随机三位数
        Random random = new Random();
        for (int i = 0; i <3 ; i++) {
            format+=random.nextInt(10);
        }
        //获取文件扩展名的专用方法
        String extension = FilenameUtils.getExtension(pic.getOriginalFilename());

        //实例化一个jersey
        Client client = new Client();
        //保存数据库的路径和名字，要发给添加页面
        String pathSql = format + "." + extension;
        //另一个服务器的请求路径是？
        String url = IMAGE_URL+format+"."+extension;
        //设置请求路径
        WebResource resource = client.resource(url);
        // 发送开始
        try {
            resource.put(String.class, pic.getBytes());
        } catch (IOException e) {
            e.printStackTrace();
        }
    //返回两个路径
        JSONObject jsonObject = new JSONObject();
        jsonObject.put("url",url);
        jsonObject.put("path",pathSql);
　　　　　//写出路径完成图片的回显，因为当时图片已经保存在另外一个tomcat服务器中了
        ResponseUtils.renderJson(response,jsonObject.toString());

    }
}

关于 ResponseUtils的代码为

/**
 * 异步返回各种格式
 * json
 * xml
 * text
 * @author lx
 *
 */
public class ResponseUtils {

    //发送内容  
    public static void render(HttpServletResponse response,String contentType,String text){
        response.setContentType(contentType);
        try {
            response.getWriter().write(text);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
    //发送的是JSON
    public static void renderJson(HttpServletResponse response,String text){
        render(response, "application/json;charset=UTF-8", text);
    }
    //发送xml
    public static void renderXml(HttpServletResponse response,String text){
        render(response, "text/xml;charset=UTF-8", text);
    }
    //发送text
    public static void renderText(HttpServletResponse response,String text){
        render(response, "text/plain;charset=UTF-8", text);
    }
}

4、新建一个webapp项目，记得切换端口，切换端口的方法1）修改tomcat文件夹的conf文件夹下的server.xml三个端口号（具体百度）2）本人用的idea，就简单修改一下如下图的配置就行了，这个服务器最好随时开着，用来当做图片服务器

 

5、在原项目（不是图片服务器项目）的springmvc配置支持上传图片功能

 <!--配置springmvc图片上传-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="10485760"/>
    </bean>

6、在tomcat文件夹的conf下的web.xml把只读去掉

<servlet>
        <servlet-name>default</servlet-name>
        <servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>
        <init-param>
            <param-name>debug</param-name>
            <param-value>0</param-value>
        </init-param>
        
        <!--新增部分-->
          <init-param>
        <param-name>readonly</param-name>
        <param-value>false</param-value>
          </init-param>
    
        <init-param>
            <param-name>listings</param-name>
            <param-value>false</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

至此，当你在表单中点击浏览，选择好了图片之后，图片就可以成功上传并显示在表单中了，同时在input中也保存了文件名，但是如何list出来呢？

答：设置一个全路径 IMAGE_URL是

也就是你的服务器路径

！！！电商项目禁用select * from，-----allUrl属性不在数据库中