<script>
import {defineComponent} from 'vue'
// 分片上传
export default defineComponent({
  name: "UploadSlice",
  methods:{
    uploadSuccessful(response, file, fileList){
      console.log(response.data)
      let fileSlice = file.response.data.split("/")
      if(fileSlice){
        let fileName = fileSlice[fileSlice.length-1] // 最后一串是文件名称
        this.$message.success(`${fileName} 上传成功`)
      }else {
        this.$message.success(`上传成功`)
      }


    },
    onRemove(file, fileList){
      let fileSlice = file.response.data.split("/")
      let fileName = fileSlice[fileSlice.length-1] // 最后一串是文件名称
      this.$request.delete(`/files/delete/${fileName}`).then(res=>{
        if(res.code == 200){
          this.$message.info(`${fileName} 取消上传`)
        }
      })
    },
    onError(err, file, fileList){
      this.$message.error(`${err}`)
    },
    upload(file,fileList){
      console.log(file,fileList)
    }
  }
})
</script>

<template>
<div>
  <el-card>
    <el-card>
      第一种上传方式
      <el-upload
          class="upload-demo"
          drag
          :action="$baseUrl+'/files/upload'"
          :show-file-list="true"
          :on-success="uploadSuccessful"
          :on-remove="onRemove"
          :http-request="upload"
          multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </el-card>

    <el-card>
      视频分块上传
      <el-upload
          class="upload-demo"
          drag
          :action="$baseUrl+'/video/fileUpload'"
          :show-file-list="true"
          :on-success="uploadSuccessful"
          :on-remove="onRemove"
          :on-error="onError"
          multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </el-card>
  </el-card>

</div>
</template>

<style scoped>

</style>