yos_web/src/SManagement/archives_upload/components/upload.vue

<template>
  <div>
    <div class="upload">
      <el-button @click="dialogUploadVisible = true" v-if="target == 'submit'"> <i class="iconfont icon-a-tuiguangsucaishangchuan1" style="color:#3874F6"></i> 上传</el-button>
    </div>
    <el-button type="warning" size="small" @click="dialogUploadVisible = true" icon="el-icon-upload" v-if="target == 'archives'">上 传</el-button>
    <el-button round v-else-if="target == 'avatar'" @click="dialogUploadVisible = true">上传头像</el-button>
    <el-dialog title="文件上传" :visible.sync="dialogUploadVisible" width="500px" :close-on-click-modal="false"
      :before-close="clearFiles">
      <el-upload style="width:100%" ref="my-upload" class="upload-demo" action="#" :auto-upload="false"
        :show-file-list="false" :on-change="handleChange" drag multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <div class="progress_panel" v-for="file in filelist" :key="file.uid">
        <img v-if="file.type === 'DOC' || file.type === 'DOCX'" width="30" src="@/assets/file_icons/word.png"
          alt="">
        <img v-else-if="file.type === 'PDF'" width="30" src="@/assets/file_icons/pdf.png" alt="">
        <img v-else-if="file.type === 'MP4' || file.type === 'AVI'" width="30" src="@/assets/file_icons/video.png"
          alt="">
        <img v-else-if="file.type === 'XLS' || file.type === 'XLSX'" width="30" src="@/assets/file_icons/excel.png"
          alt="">
        <img v-else-if="file.type === 'PNG' || file.type === 'JPG'|| file.type === 'JPEG'" width="30"
          src="@/assets/file_icons/image.png" alt="">
        <img v-else-if="file.type === 'PPT' || file.type === 'PPTX'" width="30" src="@/assets/file_icons/ppt.png"
          alt="">
        <img v-else width="30" src="@/assets/file_icons/unknow.png" alt="">
        <div>
          <p v-if="file.progress === 100" style="float:right"><span style="color:#67C23A">●</span>上传成功</p>
          <p>{{file.raw?file.raw.name:'暂无上传文件'}}</p>
          <el-progress :percentage="file.progress" :show-text="false"></el-progress>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name:'upload',
  props: ['folderid'],
  data () {
    return {
      dialogUploadVisible: false,
      params: {
        "classname": "system.attachment.huawei.OBS",
        "method": "getFileName",
        "content": {
          "filename": '',
          "filetype": '',
          "parentid": JSON.parse(sessionStorage.getItem('Parameter')).appfolderid//归属文件夹ID
        }
      },
      file: {},
      filelist: []
    }
  },
  props:{
    target: String,
    classType: {
      default() {
        return ''
      }
    }
  },
  methods: {
    handleChange (file, filelist) {
      var ext = file.name.substr(file.name.indexOf('.')+1)
      let type = []
      let result = ''
      
      if(this.classType == '1') {
        console.log(1111);
        
        type = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'svg', 'tiff']
        result = type.some(item => {
          return item == ext
        })
        if(!result) {
          this.$notify({
            title:'提示',
            message:'只能上传图片',
            type:'warning'
          })
          this.clearFiles()
          return
        }
      } else if(this.classType == '2') {
        type = ['mp4', 'ogg', 'webm']
        result = type.some(item => {
          return item == ext
        })
        if(!result) {
          this.$notify({
            title:'提示',
            message:'只能上传视频',
            type:'warning'
          })
          this.clearFiles()
          return
        }
      }

      this.filelist = filelist
      var index = file.raw.name.lastIndexOf(".");
      
      this.params.content.filename = file.raw.name

      this.params.content.filetype = ext
      this.getUploadUrl(file, ext)
    },

    // 获取华为云上传地址
    async getUploadUrl (file, ext) {
      // this.params.content.parentid = 1
      const res = await this.$api.requested(this.params)
      let url = res.data.uploadurl
      let obsfilename = res.data.serialfilename
      this.upoladFileToServer(url, file, ext, obsfilename)
    },

    // 上传到华为云
    async upoladFileToServer (url, file, ext, obsfilename) {
      let THIS = this
      let config = {
        headers: ext === 'pdf' ? { 'Content-Type': 'application/pdf' } : { 'Content-Type': 'application/octet-stream' },
        onUploadProgress: function (progressEvent) {
          let percent = progressEvent.loaded / progressEvent.total * 100
          THIS.filelist.forEach(e => {
            if (e.uid === file.uid) {
              THIS.$set(e, 'type', ext.toUpperCase());
              THIS.$set(e, 'progress', percent);
            }
          })

        },
      }
      const res = await this.$upload.hw_upload(url, file.raw, config)
      this.createFileRecord(obsfilename)
    },

    // 上传成功以后生成附件记录
    async createFileRecord (obsfilename) {
      let param = {
        "classname": "system.attachment.huawei.OBS",
        "method": "uploadSuccess",
        "content": {
          "serialfilename": obsfilename
        }
      }
      
      this.$api.requested(param).then( res => {
        this.dialogUploadVisible = false
        this.clearFiles()
        this.$emit('onSuccess',res.data.attachmentids[0])
      })
      
    },
    clearFiles () {
      this.$refs['my-upload'].clearFiles()
      this.filelist = []
      this.dialogUploadVisible = false
    }
  }
}

</script>
<style>
.upload-demo > div {
  width: 100% !important;
}
.upload-demo .el-upload-dragger {
  width: 100% !important;
}
</style>
<style scoped>
.progress_panel {
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  transition: linear 0.2s all;
}
.progress_panel:hover {
  box-shadow: 0px 0px 5px #ccc;
}
.progress_panel > div {
  flex: 1;
  padding: 0 10px;
}
.progress_panel > div > p {
  line-height: 30px;
}
  .upload .el-button {
    width: 100%;
  }
</style>