Atitit 檔案上傳功能的實現 圖片 視訊

目錄

1. 上傳原理 1

1.1. http post編碼 multipart / form-data 1

1.2. 臨時檔案模式  最簡單 2

1.3. 位元組陣列模式  簡單 2

1.4. Stream模式 教複雜，但適合大檔案 2

2. 前段實現 2

2.1. Form提交 2

2.2. Ifram模式  vs h5 formdata模式 3

3. Springboot實現 3

4. Springmvc實現方式 3

4.1.   * 通過流的方式上傳檔案 3

4.2.      * 採用file.Transto 來儲存上傳的檔案  簡單 3

4.3.    *採用spring提供的 CommonsMutipartResolver （多部分解析器   方法  複雜但靈活 4

5. Apache的開源工具:common-fileupload 4

6. 其他語言的實現 4

6.1. node.js  multer庫 4

6.2. Php的實現 5

7. ref 5

1. 上傳原理
   1. http post編碼 multipart / form-data

1. 1. 臨時檔案模式  最簡單 

Php用的這種模式，不支援stream的語言可使用此模式

Java沒有暫時貌似沒有框架使用此模式，效能較差，因為複製了倆次

1. 1.  位元組陣列模式  簡單

這個是 位元組陣列byte[] 模式，適合中小檔案，大檔案可能會爆記憶體不足，因為他是全部讀取到記憶體模式的

1. 1. Stream模式 教複雜，但適合大檔案

Java與net實現

得到一個類似MultipartHttpServletRequest物件，或  MultipartFile 

得到裡面的檔案stream，

輸出到檔案

1. 前段實現 
   1. Form提交

 檔案上傳接收，

這個是更加簡單的模式位元組陣列byte[] 模式。。。Stream模式較為複雜

MultipartHttpServletRequest  和MultipartFile 的類關係如下

MultipartHttpServletRequest multiReq

     MultipartFile file = multiReq.getFile("file");

1. 1. Ifram模式  vs h5 formdata模式

1. Springboot實現

 @RequestMapping(value="/testUpload",method=RequestMethod.POST)  

    public void testUploadFile(HttpServletRequest req,MultipartHttpServletRequest multiReq) throws IOException{  

        FileInputStream fsInputStream=(FileInputStream) multiReq.getFile("file").getInputStream();  

        FileOutputStream fileOutputStream = new FileOutputStream(new File("d://upload.jpg"));

StreamUtils.copy(fsInputStream, fileOutputStream); 

fileOutputStream.close();

    }

1. Springmvc實現方式
   1.   * 通過流的方式上傳檔案  

1. 1.      * 採用file.Transto 來儲存上傳的檔案  簡單

1. 1.    *採用spring提供的 CommonsMutipartResolver （多部分解析器   方法  複雜但靈活

     */

    @RequestMapping("springUpload")

    public String  springUpload(HttpServletRequest request) throws IllegalStateException, IOException

    {

         long  startTime=System.currentTimeMillis();

         //將當前上下文初始化給  CommonsMutipartResolver （多部分解析器）

        CommonsMultipartResolver multipartResolver=new CommonsMultipartResolver(

                request.getSession().getServletContext());

1. Apache的開源工具:common-fileupload
2. 其他語言的實現 
   1.  node.js  multer庫

1. 1. 1. 1. multer

Multer是一個用於處理multipart / form-data的node.js中介軟體，主要用於上傳檔案。它構建在busboy基礎上以提高效率。點選 這裡 閱讀更多關於multer包。

開始使用依賴關係

你可以按如下所示建立依賴關係的例項。

var Express = require('express');var multer = require('multer');var bodyParser = require('body-parser');var app = Express();

app.use(bodyParser.json());

然後，建立說明應該在哪裡以及如何儲存檔案/影象的storage。

var Storage = multer.diskStorage({

    destination: function (req, file, callback) {

        callback(null, "./Images");

    },

    filename: function (req, file, callback) {

        callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);

    }

});

每個檔案包含以下資訊：

1. 1. Php的實現

儲存被上傳的檔案

上面的例子在伺服器的 PHP 臨時資料夾建立了一個被上傳檔案的臨時副本。

這個臨時的複製檔案會在指令碼結束時消失。要儲存被上傳的檔案，我們需要把它拷貝到另外的位置：

    move_uploaded_file($_FILES["file"]["tmp_name"],      "upload/" . $_FILES["file"]["name"]);

1. ref

SpringBoot實現檔案上傳功能 - 知樂 - 部落格園.html

SpringBoot實現檔案上傳功能 - 知樂 - 部落格園.html