自定义大文件上传

 效果图     进行保存

 

 

第一步  去gitee.com 仓库 克隆   spring-boot-starter-upload: spring-boot-starter-upload

第二步  添加依赖

     <dependency>
            <groupId>bw-springboot-starter</groupId>
            <artifactId>spring-boot-starter-upload</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>

第三步  添加文件配置 application.properties

file.enable=true
#文件存放的地址
file.path=D:/images/
spring.resources.static-locations=file:${file.path}
file.domain=http://localhost:${server.port}/
spring.servlet.multipart.max-file-size=1024MB
spring.servlet.multipart.max-request-size=1024MB

 第四步  编写 controller 接口 

//注入
@Autowired
FileService fileService;

@RequestMapping("myFile")
public String upload(@ModelAttribute Chunk chunk){
    Map<String,Object> map=new HashMap<>();
    fileService.postFileUpload(chunk);
    if(chunk.getTotalChunks().equals(chunk.getChunkNumber())){
        FileResult fileResult = fileService.mergeFile(chunk);
        return fileResult.getFileUrl();

    }


    return new FileResult().getFileUrl();
}



@RequestMapping("saveFile")
public Map<String,Object> saveFile(@RequestBody Applfor file){
    Map<String,Object> map=new HashMap<>();
        //调用service进行保存
    boolean save = applforService.save(file);
    if(save){
        map.put("state",0);
        return map;
    }else{
        map.put("state",-1);
        return map;
    }
}

第 5  写vue 调用 后端 接口 写一个事件  跳专到 file  页面

<el-button type="primary" @click="upload">大文件上传</el-button>

upload(){
  this.$router.push("file");
}

第6  创建 一个FileView    路由一定得配置   进行保存

<template>
<div>
  <uploader :options="options" class="uploader-example"
            @file-added="onFileAdded"
            @file-success="onFileSuccess"
  >
    <uploader-unsupport></uploader-unsupport>
    <uploader-drop>
      <uploader-btn>select files</uploader-btn>
    </uploader-drop>
    <uploader-list></uploader-list>
  </uploader>
  <el-button @click="saveUpload">进行保存</el-button>
</div>
</template>

<script>
import SparkMD5 from 'spark-md5';
export default {
  name: "FileView",
  data(){
    return {
      file:{},
      options: {
        target:'http://localhost:8086/file/myFile', // 目标上传 URL
        chunkSize: '2048000',   //分块大小
        fileParameterName: 'file', //上传文件时文件的参数名，默认file
        maxChunkRetries: 3,  //最大自动失败重试上传次数
        testChunks: false,     //是否开启服务器分片校验
      }
    }
  },methods:{
    saveUpload(){
      this.axios.post("http://localhost:8086/file/saveFile",this.file).then(res=>{
        alert("1111")
        if(res.data.state==0){
          this.$message.success("文件上传成功")
          this.$router.push("/")
        }else{
          this.$message.error("文件保存失败")
        }
      })
    },
    onFileSuccess(rootFile,file,response,chunk){
      console.log("test",response)
      this.file.url=response
      console.log(this.file.url)
    },
    onFileAdded(file) {
      const fileReader = new FileReader()
      fileReader.readAsBinaryString(file);
      fileReader.onload = e => {
        const md5 = SparkMD5.hashBinary(e.target.result);
        console.log(md5);
        file.uniqueIdentifier = md5;
      }
    }
  },created() {

  }
}
</script>

<style scoped>

</style>

第7  视频  播放   给  url  定个值   设个弹框播放视频

<el-button @click="handleClick(scope.row.url)" type="text" size="small">视频播放</el-button>

<el-dialog title="视频播放" :visible.sync="dialogFormVisible">
  <video :src="this.src" width="200px" height="200px" controls></video>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">返回</el-button>
  </div>
</el-dialog>

data(){
  return{
    dialogFormVisible:false
    url:'',
    src:'',
  }
}

handleClick(url) {
  console.log(url)
  this.src=url

  this.dialogFormVisible=true
}