plupload與springmvc分段上傳視頻

時間 2019-12-07
標籤 plupload springmvc 分段上傳視頻欄目 Spring 简体版
原文原文鏈接
前端上傳視頻時須要下載plupload插件https://www.plupload.com/download/
須要導入如下js文件
<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../js/plupload.full.min.js"></script>
<script type="text/javascript" src="../../js/zh_CN.js"></script>
<script type="text/javascript" src="../../js/jquery.plupload.queue.js"></script>
css樣式：
 <link rel="stylesheet" href="../../css/jquery.plupload.queue.css" media="all" />
 還須要導入
/js/Moxie.swf'和/js/Moxie.xap <body> <div id="uploader"> <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div>
<button id="toStop">暫停一下</button>
<button id="toStart">再次開始</button>
<%--<audio src="${ctx}/upload/player" controls="controls">
    Your browser does not support the audio element.
</audio>--%>
<script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../js/plupload.full.min.js"></script>
<script type="text/javascript" src="../../js/zh_CN.js"></script>
<script type="text/javascript" src="../../js/jquery.plupload.queue.js"></script>

<script type="text/javascript">
    $(function() {
        // Initialize the widget when the DOM is ready
        var uploader = $("#uploader").pluploadQueue({
            // General settings
            runtimes: 'html5,flash,silverlight,html4',
            url: "http://localhost:8082/upload/pluploadUpload",

            // Maximum file size
            max_file_size: '10000mb',

            chunk_size: '1mb',

            // Resize images on clientside if we can
            resize: {
                width: 200,
                height: 200,
                quality: 90,
                crop: true // crop to exact dimensions
            },

            // Specify what files to browse for
            filters: [
                {title: "Image files", extensions: "jpg,gif,png"},
                {title: "Vedio files", extensions: "mp4,mkv"},
                {title: "Zip files", extensions: "zip,avi"}
            ],

            // Rename files by clicking on their titles
            rename: true,

            // Sort files
            sortable: true,

            // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
            dragdrop: true,

            // Views to activate
            views: {
                list: true,
                thumbs: true, // Show thumbs
                active: 'thumbs'
            },

            // Flash settings
            flash_swf_url: '${ctx}/js/Moxie.swf',

            // Silverlight settings
            silverlight_xap_url: '${ctx}/js/Moxie.xap',
            init: { //監聽函數
              /*  FilesAdded: function(uploader,file) { //當文件添加到上傳隊列後觸發
                    uploader.start(); //開始上傳
                    return false;
                },*/
               /* UploadProgress: function(uploader,file) { //會在文件上傳過程當中不斷觸發
                    console.info(uploader.total.percent + "%");
                    console.info(file.percent + "%"); //文件已上傳部分所佔的百分比
                },*/
                FileUploaded: function(uploader,file,responseObject) { //當隊列中的某一個文件上傳完成後觸發
                    console.info(responseObject.response); //服務器返回的文本
                    console.info(responseObject.status); //服務器返回的http狀態碼，好比200
                },
              /*  UploadComplete: function(uploader,file) { //當上傳隊列中全部文件都上傳完成後觸發
                    console.info("ok");
                },*/
                Error: function(uploader,errObject) { //當發生錯誤時觸發
                    console.info(errObject.code); //錯誤代碼
                    console.info(errObject.message); //錯誤信息
                }
            }
        }); //初始化Plupload實例

        $("#toStop").on('click', function () {
            uploader.stop();
        });

        $("#toStart").on('click', function () {
            uploader.start();
        });
    });
</script>
</body>
後臺返回值時init監聽函數能夠取到所須要的數據

後臺controller層
package com.irs.controller;

import com.irs.pojo.Plupload;
import com.irs.service.PluploadService;
import com.irs.util.GlobalUtil;
import com.irs.util.ResultUtil;
import org.apache.commons.io.IOUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.util.HashMap;
import java.util.Map;

@Controller
@RequestMapping("upload")
public class UploadController {

    @Autowired
    private PluploadService pluploadService;

    @RequestMapping(value = "/pluploadUpload")
    @ResponseBody
    public ResultUtil upload(Plupload plupload, HttpServletRequest request, HttpServletResponse response) {

        String FileDir = "pluploadDir";//文件保存的文件夾
        plupload.setRequest(request);//手動傳入Plupload對象HttpServletRequest屬性

        //int userId = ((User)request.getSession().getAttribute("user")).getUserId();

        //文件存儲絕對路徑,會是一個文件夾，項目相應Servlet容器下的"pluploadDir"文件夾，還會以用戶惟一id做劃分
       // File dir = new File(request.getSession().getServletContext().getRealPath("/") + FileDir);
        File dir = new File(GlobalUtil.getValue("upfile.path"));
        if(!dir.exists()){
            dir.mkdirs();//可建立多級目錄，而mkdir()只能建立一級目錄
        }
        //開始上傳文件
        Plupload plupload1=pluploadService.upload(plupload, dir);
        Map map = new HashMap<>();
        map.put("plupload", plupload1);
        return ResultUtil.ok(map);
    }

    }
service層
package com.irs.service;

import com.irs.pojo.Plupload;
import it.sauronsoftware.jave.Encoder;
import it.sauronsoftware.jave.MultimediaInfo;
import org.springframework.stereotype.Component;
import org.springframework.util.MultiValueMap;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import java.io.*;
import java.sql.Timestamp;
import java.util.Iterator;
import java.util.List;


/**
 * Plupload Service模塊，同Plupload實體類同樣，由於要用到Spring web相關依賴，因此不將其放在Service模塊
 */
@Component    //將寫好的類注入SpringIOC容器中讓Controller自動裝載
public class PluploadService {


    public Plupload upload(Plupload plupload, File pluploadDir){
        String fileName = ""+System.currentTimeMillis()+plupload.getName();//在服務器內生成惟一文件名
        Plupload plupload1=upload(plupload, pluploadDir, fileName);
        return plupload1;
    }

    private Plupload upload(Plupload plupload,File pluploadDir,String fileName){

        int chunks = plupload.getChunks();//用戶上傳文件被分隔的總塊數
        int nowChunk = plupload.getChunk();//當前塊，從0開始

        //這裏Request請求類型的強制轉換可能出錯，配置文件中向SpringIOC容器引入multipartResolver對象便可。
        MultipartHttpServletRequest multipartHttpServletRequest  = (MultipartHttpServletRequest)plupload.getRequest();
        //調試發現map中只有一個鍵值對
        MultiValueMap<String,MultipartFile> map = multipartHttpServletRequest.getMultiFileMap();

        if(map!=null){
            try{
                Iterator<String> iterator = map.keySet().iterator();
                while(iterator.hasNext()){

                    String key = iterator.next();
                    List<MultipartFile> multipartFileList = map.get(key);

                    for(MultipartFile multipartFile:multipartFileList){//循環只進行一次

                        plupload.setMultipartFile(multipartFile);//手動向Plupload對象傳入MultipartFile屬性值
                        File targetFile = new File(pluploadDir+"/"+fileName);//新建目標文件，只有被流寫入時纔會真正存在
                        if(chunks>1){//用戶上傳資料總塊數大於1，要進行合併

                            File tempFile = new File(pluploadDir.getPath()+"/"+multipartFile.getName());
                            //第一塊直接從頭寫入，不用從末端寫入
                            savePluploadFile(multipartFile.getInputStream(),tempFile,nowChunk==0?false:true);

                            if(chunks-nowChunk==1){//所有塊已經上傳完畢，此時targetFile由於有被流寫入而存在，要改文件名字
                                tempFile.renameTo(targetFile);

                                //每當文件上傳完畢，將上傳信息插入數據庫
                                Timestamp now = new Timestamp(System.currentTimeMillis());

                                System.out.println(now);
                               // youandmeService.uploadInfo(fileName,((User)(plupload.getRequest().getSession().getAttribute("user"))).getUsername(),now);
                            }
                        }
                        else{
                            //只有一塊，就直接拷貝文件內容
                            multipartFile.transferTo(targetFile);

                            //每當文件上傳完畢，將上傳信息插入數據庫
                            Timestamp now = new Timestamp(System.currentTimeMillis());

                            System.out.println(now);
                           // youandmeService.uploadInfo(fileName, ((User) (plupload.getRequest().getSession().getAttribute("user"))).getUsername(), now);
                        }
                        //獲取視頻時長
                        Encoder encoder = new Encoder();
                        String length = "";
                        try {
                            MultimediaInfo m = encoder.getInfo(targetFile);
                            System.out.println("-------"+m.getDuration());
                            long ls = m.getDuration()/1000;
                            int hour = (int) (ls/3600);
                            int minute = (int) (ls%3600)/60;
                            int second = (int) (ls-hour*3600-minute*60);
                            length = hour+"時"+minute+"分"+second+"秒";
                            System.out.println(length);
                            Plupload plupload1=new Plupload();
                            plupload1.setName(fileName);
                            plupload1.setTimelength(length);
                            return plupload1;
                        } catch (Exception e) {
                            e.printStackTrace();
                        }
                    }
                }
            }
            catch (IOException e){
                e.printStackTrace();
            }
        }
        return null;
    }
    private void savePluploadFile(InputStream inputStream,File tempFile,boolean flag){
        OutputStream outputStream = null;
        try {
            if(flag==false){
                //從頭寫入
                outputStream = new BufferedOutputStream(new FileOutputStream(tempFile));
            }
            else{
                //從末端寫入
                outputStream = new BufferedOutputStream(new FileOutputStream(tempFile,true));
            }
            byte[] bytes = new byte[1024];
            int len = 0;
            while ((len = (inputStream.read(bytes)))>0){
                outputStream.write(bytes,0,len);
            }
        }
        catch (FileNotFoundException e){
            e.printStackTrace();
        }
        catch (IOException e){
            e.printStackTrace();
        }
        finally {
            try{
                outputStream.close();
                inputStream.close();
            }
            catch (IOException e){
                e.printStackTrace();
            }
        }
    }
}
以及plupload實體類
package com.irs.pojo;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;

/**
 * Plupload實體類固定格式，屬性名不可修改
 * 由於MultipartFile要用到Spring web的依賴，而該依賴在web模塊中才引入，因此不把該實體類放在entity模塊
 */
public class Plupload {
    /**文件原名*/
    private String name;
    /**用戶上傳資料被分解總塊數*/
    private int chunks = -1;
    /**當前塊數（從0開始計數）*/
    private int chunk = -1;
    /**HttpServletRequest對象，不會自動賦值，須要手動傳入*/
    private HttpServletRequest request;
    /**保存文件上傳信息，不會自動賦值，須要手動傳入*/
    private MultipartFile multipartFile;

    private String timelength;

    public String getTimelength() {
        return timelength;
    }

    public void setTimelength(String timelength) {
        this.timelength = timelength;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getChunks() {
        return chunks;
    }

    public void setChunks(int chunks) {
        this.chunks = chunks;
    }

    public int getChunk() {
        return chunk;
    }

    public void setChunk(int chunk) {
        this.chunk = chunk;
    }

    public HttpServletRequest getRequest() {
        return request;
    }

    public void setRequest(HttpServletRequest request) {
        this.request = request;
    }

    public MultipartFile getMultipartFile() {
        return multipartFile;
    }

    public void setMultipartFile(MultipartFile multipartFile) {
        this.multipartFile = multipartFile;
    }
}

複製代碼