<template>
  <div>
    <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">将{{title}}拖到此处，或<em>点击上传</em></div>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: "UploadView",
  props:{
    title:"文件1",
  },
  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>

<style>

</style>