前端使用 vue-simple-upload

后端使用 springboot

前端

安裝 npm install vue-simple-uploader --save

<template>
    <div class="hello">
        <h3>Installed CLI Plugins</h3>
        <uploader :options="options" class="uploader-example" @file-added="onFileAdded" @file-success="onFileSuccess" @file-error="onFileError">
            <uploader-unsupport></uploader-unsupport>
            <uploader-drop>
                <!-- <p>Drop files here to upload or</p> -->
                <uploader-btn>select files</uploader-btn>
                <!-- <uploader-btn :attrs="attrs">select images</uploader-btn> -->
                <!-- <uploader-btn :directory="true">select folder</uploader-btn> -->
            </uploader-drop>
            <uploader-list></uploader-list>
        </uploader>

    </div>
</template>

<script>
export default {
    name: "HelloWorld",
    props: {
        msg: String,
    },
    data() {
        return {
            options: {
                target: "http://localhost:11001/upload/bigfile",
                testChunks: false,
                //上傳文件時候,文件的參數名,默認為 file
                fileParameterName: "file",
                //其他參數,可以是一個對象的形式
                query: {},
                //上傳方式，默認為 multipart
                method: "multipart",
                //http方法，默認為post
                uploadMethod: "post",
                //分片大小 單位 bytes ,下面 2M  1024bytes = 1KB, 1024 * 1024 bytes = 1MB
                chunkSize: 1 * 1024 * 1024 * 2,
            },
            attrs: {
                accept: "image/*",
            },
        };
    },
    methods: {
        onFileAdded() {
            console.log("onFileAdded");
            let s = 111;
            s.toFixed();
        },
        onFileSuccess() {
            console.log("onFileSuccess");
        },
        onFileError() {
            console.log("onFileError");
        },
    },
};
</script>
<style scoped lang="scss">
h3 {
    margin: 40px 0 0;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    display: inline-block;
    margin: 0 10px;
}
a {
    color: #42b983;
}
</style>

后端

package com.tiger.springbootmongodb.controller;
import com.tiger.springbootmongodb.pojo.Chunk;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.MultipartResolver;
import JAVAx.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.io.RandomaccessFile;
import java.util.Iterator;
@RestController
@RequestMApping("upload")
public class BigFileUploadController {
    @Autowired
    MultipartResolver multipartResolver;

    @PostMapping("bigfile")
    public String bigFileUpload(@RequestParam(value = "file", required = false) MultipartFile multipartFile, @ModelAttribute Chunk chunk, HttpServletRequest request, HttpServletResponse response) throws IOException {
        System.out.println("第 " + chunk.getChunkNumber() + " 片文件，文件大小：" + chunk.getCurrentChunkSize());
        File file= new File("D:\1-program\" + chunk.getFilename());
        if(chunk.getChunkNumber() == 1 && !file.exists()){
            file.createNewFile();
        }
        try(
                //將塊文件寫入文件中
                InputStream fos=chunk.getFile().getInputStream();
                RandomAccessFile raf =new RandomAccessFile(file,"rw")
        ){
            int len=-1;
            byte[] buffer=new byte[1024];
            raf.seek((chunk.getChunkNumber()-1)*1024*1024*2);
            while((len=fos.read(buffer))!=-1){
                raf.write(buffer,0,len);
            }
        }catch (Exception e){
            e.printStackTrace();
        }
        if(chunk.getChunkNumber().equals(chunk.getTotalChunks())){
            response.setStatus(200);
            // TODO 向數據庫中保存上傳信息
            return "over";
        }else {
            response.setStatus(201);
            return "ok";
        }
    }
}