SSM实战项目——哈哈音乐（三）文件服务器模块开发

1、创建模块

创建一个子模块（hami-fie），里面不写任何代码，专门用于文件上传的服务器

在hami-file的webapp下创建上传文件资源的文件夹，并引入资源（图片、音频）

2、pom.xml主配置文件中引入文件上传的依赖

            <dependency>
                <groupId>commons-io</groupId>
                <artifactId>commons-io</artifactId>
                <version>${commons-io.version}</version>
            </dependency>
            <dependency>
                <groupId>commons-fileupload</groupId>
                <artifactId>commons-fileupload</artifactId>
                <version>${commons-fileupload.version}</version>
            </dependency>

3、在springmvc配置文件中加入文件上传的配置

 <!--文件上传-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="10024000"></property>
    </bean>

4、在hami-core中创建sys.properties属性文件

filePath=http://localhost:8082/ecps-file

5、在hami-core中创建属性文件读取工具类

package com.qcby.util;

import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;

public class PropReader {
    public static String read(String key){
        String result = null;
        Properties prop = new Properties();
        InputStream stream = PropReader.class.getClassLoader().getResourceAsStream("sys.properties");
        try {
            prop.load(stream);
            result = prop.getProperty(key);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return result;
    }
}

6、复制一份tomcat作为文件服务器

修改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>

7、创建文件上传的Controller

package com.qcby.controller;

import com.alibaba.fastjson.JSONObject;
import com.qcby.util.PropReader;
import com.sun.jersey.api.client.Client;
import com.sun.jersey.api.client.ClientResponse;
import com.sun.jersey.api.client.WebResource;
import org.apache.commons.lang.StringUtils;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Iterator;
import java.util.Map;
import java.util.Set;
import java.util.UUID;

/**
 * 文件上传
 */
@Controller
@RequestMapping("/upload")
public class UploadController {
    /**
     * @param picfile  要上传的图片信息
     * @param fileType 文件类型
     * @param request  请求对象
     * @param response 响应对象
     * @param lastImg  用于确定最后一张上传的图片
     * @throws IOException
     */
    @RequestMapping("/uploadFile")
    public void uploadFile(MultipartFile picfile, String fileType, String lastImg, HttpServletRequest request, HttpServletResponse response) throws IOException {
        //1、通过请求对象获取所有有关文件上传的信息
        //2、拿到要上传的文件名称做处理（UUID）
        String originalFilename = picfile.getOriginalFilename();
        String fileName = UUID.randomUUID().toString();
        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
        fileName = fileName + suffix;
        //3、上传位置 上传路径
        String filepath = "http://localhost:8082";
        //绝对路径，用于前端访问
        String realpath = filepath + "/" + fileType + "/" + fileName;
        //相对路径，用于存储到数据库
        String relativepath = "/" + fileType + "/" + fileName;
        //4、获取上传文件的字节流（图片、音频文件等）   字符流（文件文本）
        byte[] bytes = picfile.getBytes();
        //5、利用提供好的类进行文件上传
        //创建jersy的客户端
        Client client = Client.create();
        //获取web资源
        WebResource resource = client.resource(realpath);
        //判断是否为最后一张需要上传的图片，删除老图片
        if (lastImg != null && !"".equals(lastImg)) {
            WebResource resource1 = client.resource(lastImg);
            // 尝试执行HEAD请求以检查资源是否存在
            ClientResponse response1 = resource1.head();
            if (response1.getStatus() == 200) {
                // 资源存在，可以安全地删除
                System.out.println("正在删除资源...");
                response1.close();  // 关闭HEAD请求的响应
                resource1.delete();
            } else {
                // 资源不存在，不需要删除
                System.out.println("资源不存在，无需删除");
            }
        }
        //文件上传
        resource.put(bytes);
        //创建json对象
        JSONObject jo = new JSONObject();
        jo.put("realPath", realpath);
        jo.put("relativePath", relativepath);

        response.getWriter().write(jo.toString());


//        //把Request做强制转换
//        MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;
//        //获取文件上传相关的所有前端传递信息
//        Map<String, MultipartFile> fileMap = mr.getFileMap();
//        //获取前端传递的文件
//        //MultipartFile file = fileMap.get("picfile");
//        //获取文件名字
//        //String filename = file.getOriginalFilename();
//        Set<String> keySet = fileMap.keySet();
//        Iterator<String> iterator = keySet.iterator();
//        String key = iterator.next();
//        //获得到上传的文件
//        MultipartFile multipartFile = fileMap.get(key);
//        byte[] bytes = multipartFile.getBytes();
//
//        //获得文件的原始文件名
//        String originalFilename = multipartFile.getOriginalFilename();
//        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
//        String fileName = UUID.randomUUID().toString();
//        fileName = fileName + suffix;
//
//        //创建jersy的客户端
//        Client client = Client.create();
//
//        //删除老图片
//        if(StringUtils.isNotBlank(lastImage)){
//            WebResource resource1 = client.resource(lastImage);
//            resource1.delete();
//        }
//
//        //resource的参数文件服务器上的文件的绝对路径
//        WebResource resource = client.resource(PropReader.read("filePath")+"/"+type+"/"+fileName);
//        resource.put(bytes);
//        //创建json对象
//        JSONObject jo = new JSONObject();
//        jo.put("realPath", PropReader.read("filePath")+"/"+type+"/"+fileName);
//        jo.put("relativePath", "/"+type+"/"+fileName);
//
//        response.getWriter().write(jo.toString());
    }

    /**
     * 上传mp3
     * @param mp3file
     * @param fileType
     * @param lastMp3
     * @param request
     * @param response
     * @throws IOException
     */
    @RequestMapping("/uploadFileMp3")
    public void uploadFileMp3(MultipartFile mp3file, String fileType, String lastMp3, HttpServletRequest request, HttpServletResponse response) throws IOException {
        //1、通过请求对象获取所有有关文件上传的信息
        //2、拿到要上传的文件名称做处理（UUID）
        String originalFilename = mp3file.getOriginalFilename();
        String fileName = UUID.randomUUID().toString();
        String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
        fileName = fileName + suffix;
        //3、上传位置 上传路径
        String filepath = "http://localhost:8082";
        //绝对路径，用于前端访问
        String realpath = filepath + "/" + fileType + "/" + fileName;
        //相对路径，用于存储到数据库
        String relativepath = "/" + fileType + "/" + fileName;
        //4、获取上传文件的字节流（图片、音频文件等）   字符流（文件文本）
        byte[] bytes = mp3file.getBytes();
        //5、利用提供好的类进行文件上传
        //创建jersy的客户端
        Client client = Client.create();
        //获取web资源
        WebResource resource = client.resource(realpath);
        //判断是否为最后一张需要上传的MP3，删除老mp3
        if (lastMp3 != null && !"".equals(lastMp3)) {
            WebResource resource1 = client.resource(lastMp3);
            // 尝试执行HEAD请求以检查资源是否存在
            ClientResponse response1 = resource1.head();
            if (response1.getStatus() == 200) {
                // 资源存在，可以安全地删除
                System.out.println("正在删除资源...");
                response1.close();  // 关闭HEAD请求的响应
                resource1.delete();
            } else {
                // 资源不存在，不需要删除
                System.out.println("资源不存在，无需删除");
            }
        }
        //文件上传
        resource.put(bytes);
        //创建json对象
        JSONObject jo = new JSONObject();
        jo.put("realPath", realpath);
        jo.put("relativePath", relativepath);

        response.getWriter().write(jo.toString());

    }
}

8、前端ajax的调用和返回

上传图片

function  submitFile(){
            $("#location").val($("#i-file").val());
            $("#songerForm").ajaxSubmit({
                url:"/upload/uploadFile",
                data:{
                    fileType:"pic"
                },
                dataType:"json",
                success:function (json) {
                    $("#songerImg").attr("src",json.realPath);
                    $(".example-image-link").attr("href",json.realPath);
                    $("#lastImg").val(json.realPath);
                    $("#pic").val(json.relativePath);
                }
            })
        }

上传MP3

function  submitFile(){
            $("#mp3loc").val($("#i1-file").val());
            $("#song-form").ajaxSubmit({
                url:"/upload/uploadFileMp3",
                data:{
                    fileType:"mp3"
                },
                dataType:"json",
                success:function (json) {
                    $("#lastMp3").val(json.realPath);
                    $("#mp3").val(json.relativePath);
                    $("audio").attr("src",json.realPath)
                }
            })
        }

数据库存入文件路径形式

9、前端文件上传代码

<div class="controls form-group">
    <div class="col-sm-4 col-md-2">
        <div class="image-row">
            <div class="image-set">
                <a class="example-image-link" href="../../img/gallery-photo/image-3.jpg" data-lightbox="example-set" title="Click on the right side of the image to move forward.">
                <img id="songerImg" class="example-image" src="../../img/gallery-photo/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb" width="150" height="150" />
                </a>
             </div>
         </div>
     </div>
</div>
<label for="i-file" class="control-label">选择文件 <span class="required">*</span></label>
    <div id="examples" class="section examples-section">
         <div class="col-sm-6">
              <div class="input-group">
                   <input id='location' class="form-control" onclick="$('#i-file').click();">
                   <label class="input-group-btn">
                   <input type="button" id="i-check" value="选择封面" class="btn btn-primary" onclick="$('#i-file').click();">
                   </label>
               </div>
          </div>
    <input type="hidden" id="pic" name="pic" lay-verify="pic">
    <input type="hidden" id="lastImg" name="lastImg">
    <input type="file" name="picfile" id='i-file'  accept=".jpg, .png" onchange="submitFile()" style="display: none">
</div>

a标签class="example-image-link"用于对图片的放大缩小显示，值为绝对路径

img标签id="songerImg"用于显示上传到服务器的图片，值为绝对路径

input输入框中id="pic" 用于存储存入数据库的图片路径，值为相对路径

input输入框中id="lastImg"用于存储上一次上传图片的路径，值为绝对路径，如果图片上传多次，但是没有提交到数据库，那么前几次上传到服务器中的图片将被删除，只保留最后提交的一次图片，并将图片的相对存入数据库

MP3文件上传的逻辑与图片文件上传相似