yos_web/src/components/upload/hw_obs_upload.vue

<template>
  <div>
    <!-- 缩略图类型 -->
    <div v-if="btntype === 'smallimage'" @click="dialogUploadVisible = true" class="small-image-upload-btn">
      <i class="el-icon-plus"></i>
    </div>
    <!-- 图片类型 -->
    <div v-else-if="btntype === 'image'" @click="dialogUploadVisible = true" class="image-upload-btn">
      <i class="el-icon-plus"></i>
    </div>
    <!-- 宽图类型 -->
    <div v-else-if="btntype === 'limage'" @click="dialogUploadVisible = true" class="image-upload-btn limage-upload-btn">
      <i class="el-icon-plus"></i>
    </div>
    <!-- 图标类型 -->
    <div v-else-if="btntype === 'icon'" >
      <el-button icon="el-icon-paperclip" type="text" size="mini" @click="dialogUploadVisible = true">添加附件</el-button>
    </div>
    <!-- 按钮类型 -->
    <el-button v-else type="primary" size="small" @click="dialogUploadVisible = true" icon="el-icon-upload">上 传</el-button>
    <el-dialog title="文件上传" :visible.sync="dialogUploadVisible" width="500px" append-to-body :close-on-click-modal="false" :before-close="clearFiles">
      <selectMedia v-if = "!hidemediastock" @onShow="onShow" :accept="accept" :bindData="bindData" @onBindSuccess="onBindSuccess"></selectMedia>
      <el-upload
        style="width:100%"
        ref="my-upload"
        class="upload-demo"
        :accept="accept"
        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>
import selectMedia from '@/components/uploadBindMediaStock/index.vue'
export default {
  /*
    folderid:文件夹id; 必填
    btntype:展示上传按钮的类型;
    accept:限制上传文件类型;
    bindData:附件上传成功后对应需要绑定的数据信息,
    hidemediastock:是否隐藏媒体库选择
  */
  props:['folderid','btntype','accept','bindData','hidemediastock'],
  components:{
    selectMedia
  },
  data () {
    return {
      dialogUploadVisible: false,
      params: {
        "classname": "system.attachment.huawei.OBS",
        "method": "getFileName",
        "content": {
          "filename": '',
          "filetype": '',
          "parentid": ""//归属文件夹ID
        }
      },
      file: {},
      filelist: []
    }
  },
  methods: {
    handleChange (file, filelist) {
      this.filelist = filelist
      var index = file.raw.name.lastIndexOf(".");
      var ext = file.name.substr(index + 1);
      this.params.content.filename = file.raw.name
      this.params.content.filetype = ext
      this.getUploadUrl(file, ext)
    },

    // 获取华为云上传地址
    async getUploadUrl (file, ext) {
      this.params.content.parentid = this.folderid
      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' } : ext === 'svg'?{ 'Content-Type': 'image/svg+xml' } : { '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,attinfos) {
      let obj = {
         "serialfilename": obsfilename
      }
      obj = Object.assign({},obj,this.bindData)
      let param = {
        "classname": "system.attachment.huawei.OBS",
        "method": "uploadSuccess",
        "content":obj
      }
      const res = await this.$api.requested(param)
      if (res.code ===  1) {
        this.$emit('onSuccess',res)
      }
    },

    clearFiles () {
      this.$refs['my-upload'].clearFiles()
      this.filelist = []
      this.dialogUploadVisible = false
    },

    // 监听打开媒体库的时候关闭上传弹窗
    onShow () {
      this.dialogUploadVisible = false
    },
    onBindSuccess (res) {
      console.log(res)
      this.$emit('onSuccess',res)
    }
  }
}

</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;
}
.image-upload-btn{
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 150px;
  height: 150px;
  background: #FFFFFF;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #CCCCCC;
  color: #CCCCCC;
  font-size: 4rem;
  cursor: pointer;
}
.small-image-upload-btn{
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 40px;
  height: 40px;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #CCCCCC;
  color: #CCCCCC;
  font-size: 2rem;
  cursor: pointer;
  margin:0 auto;
}
.limage-upload-btn{
  width: 384px !important;
}
</style>