yos_web/src/components/upload/preview_upload.vue

<template>
  <div>
    <div v-if="type === 'button'" class="picture_list">
      <div class="flex-align-center flex-between pionter" v-for="(img,index) in fileLinkList" :key="img.index">
        <div class="flex-align-center">
          <img width="30" :src="img.type.split('/')[0] === 'image'?img.url:require('@/assets/file_icons/file.svg')" class="inline-16" alt="">
          <div class="file__link inline-16">
            <p>{{img.name}}</p>
          </div>
        </div>
        <i style="color:red;" class="el-icon-delete" @click="handleRemove(index)"></i>
      </div>
      <el-upload
        action="#"
        :on-change="onChange"
        :show-file-list="false"
        :auto-upload="false"
        multiple>
        <el-button size="small" type="text" icon="el-icon-paperclip">点击上传</el-button>
      </el-upload>
    </div>
    <div v-else class="flex-align-stretch">
      <div v-for="(img,index) in fileLinkList" :key="index" class="upload_image__panel">
        <img :src="img.type.split('/')[0] === 'image'?img.url:require('@/assets/file_icons/file.svg')" alt="">
        <div class="upload_image__panel_mod flex-align-center flex-around">
          <i class="el-icon-delete" style="font-size:16px" @click="handleRemove(index)"></i>
        </div>
      </div>
      <el-upload
        :accept="accept"
        action="#"
        :on-change="onChange"
        :show-file-list="false"
        :auto-upload="false"
        multiple>
        <i class="el-icon-plus"></i>
      </el-upload>
    </div>
  </div>
</template>

<script>
export default {
  props:['folderid','bindData','type','accept'],
  data() {
    return {
      imageUrl:'',
      fileList:[],
      fileLinkList:[],
      params: {
        "classname": "system.attachment.huawei.OBS",
        "method": "getFileName",
        "content": {
          "filename": '',
          "filetype": '',
          "parentid": ""//归属文件夹ID
        }
      },
    };
  },
  methods: {
    onChange (file,filelist) {
      this.fileList = filelist
      this.beforeUpload(file.raw)
    },
    beforeUpload (file) {
      console.log(file)
      var that = this

      var fileReader = new FileReader();

      fileReader.readAsDataURL(file);

      fileReader.onload = function(e) {

        var result = e.target.result;
        that.fileLinkList.push({url:result,type:file.type,name:file.name})
      }
    },
    handleRemove (index) {
      this.fileList = this.fileList.filter((e,idx)=>{
        if (idx !== index) {
          return e
        }
      })
      this.fileLinkList = this.fileLinkList.filter((e,idx)=>{
        if (idx !== index) {
          return e
        }
      })
    },
    toUpload () {
      this.fileList.forEach(file=>{
        let index = file.name.lastIndexOf(".");
        let ext = file.name.substr(index + 1);
        this.params.content.filename = file.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' },
      }
      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)
        this.fileList = []
        this.fileLinkList = []
      }
    },
  }
}

</script>
<style>
</style>
<style scoped>
.upload_image__panel{
  position: relative;
  height:148px;
  width: 148px;
  border-radius: 6px;
  margin-right: 10px;
  margin-bottom:10px;
  border: 1px solid #c0ccda;
  overflow: hidden;
}
.upload_image__panel img{
  width: 100%;
  height: 100%;
}
.upload_image__panel_mod{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  color:#fff;
  background: rgba(0,0,0,.8);
  opacity: 0;
  transition: .3s linear;
  cursor: pointer;
}
.upload_image__panel:hover .upload_image__panel_mod{
  opacity: 1;
}
.pionter{
  margin:6px 0;
  padding: 10px;
  transition: .2s linear;
  cursor: pointer;
  border-radius: 5px;
}
.pionter:hover{
  box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}
</style>