SpringBoot+VUE 简单分片文件上传-前端1

前言
本文主要实现web文件上传，前端VUE如何进行文件信息获取后放到集合中，后续通过request传输到后端
一、访问ElementPlus获取上传组件
访问到ElementPlus选取上传组件到我们的项目中

这里由于后续我需要进行一些定制所以没有使用VUE里的上传组件，但是达到的文件上传目的是一样，这个大家可自行进行选择。
HTML

<div style="display: flex;margin-top: 3%;">
  <div>
    <div style="margin-bottom: 5%;">
      <input type="file" @change="handleChange" id="default-btn">
    </div>

  </div>
     <el-button @click="upload" size="small" type="success">分片上传</el-button>
</div>

js

  //上传
    handleChange(e) {
      this.file = null
      this.name = null
      this.chunks = null
      this.file = e.target.files[0]
      this.name = this.file.name
      // 分片大小根据实际需要 调整 可以配置在前端配置文件中
      this.chunks = Math.ceil(this.file.size / 1024 / 1024 / 10) // 10MB一片
      // this.initWebSocket() //开启websocket
    },
     upload(){
      let than=this;
      let filename=this.name.substring(this.name.lastIndexOf("."), this.name.length);
       than.loading_Update=true;//这个是lading加载动画，这个可以去掉
       // than.dialogVisible=true;
       // 现将文件分片
       const formData = new FormData()
       formData.append('file', this.file.slice(this.chunk * 1024 * 1024 * 10, (this.chunk + 1) * 1024 * 1024 * 10))//这是第几分卷（具体的文件包）
       formData.append('chunk', this.chunk)//第几卷
       formData.append('chunks', this.chunks)//分卷的数量
       formData.append('name', this.name)//文件名称
       //projectcode这个是我自己定义的参数，不是必须的；
       formData.append('projectcode',sessionStorage.getItem("projectcode"))
       // 然后递归调用文件上传接口（概念就是多次request将文件全部发送到后端）
       request.post('api/uploadFile/splitFileUpload', formData)
           .then(res=> {
             this.chunk++
             //判断是否全部上传，如果没有自己调用自己到文件全部上传完成为止
             if (this.chunk < this.chunks) {
               this.upload()
             }
             //这是分卷上传完成后我自己进行的调用，在这里我做了文件上传合成后的文件进行的解压存储数据的操作，在这里可以进行忽略一下代码
             else if(res=="成功") {
               request.get("/api/file/import", {
                 params: {
                   contractor: this.item.companyname,
                   name: this.name,
                   projectcode:sessionStorage.getItem("projectcode")
                 }
               }).then(res=>{
                 if(res.code==1){
                   this.$message({
                     type:"success",
                     message:"上传成功"
                   })
                   this.message="上传成功"
                   than.loading_Update=false;
                   this.url=res.data
                 }else{
                   this.$message({
                     type:"danger",
                     message:res.message
                   })
                   this.message=res.message
                 }
                 //初始化
                 this.file = null
                 this.name = null
                 this.chunks = null
                 //关闭websocket
                 // this.colseConnect()
               })
             }
           })
    },

相关的参数（this.XXX中的XXX）需要大家自己进行在
data(){
raturn{
}
}，
进行定义即可防止提示错误，在这里我我就不过多解释了。
到这里前端的分卷上传就完成了，后续我会不上后端1的代码完成这次简单的分片上传。