BusinessBenchmark/src/components/notification/notificaUpload.vue

<template>
  <div>
    <el-upload
      :multiple="true"
      action="null"
      :file-list="fileList"
      :show-file-list="true"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      class="upload-demo"
      drag
      :limit="1"
      :http-request="uploadResourceRequest"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
  </div>
</template>

<script>

import { uploadOn, del } from './notificaUpload'
import baseUrl from '../../utils/baseUrl.js'

export default {
  name: 'FileUpload',
  // 接受父组件的值
//   props: {
//     value: { type: String },
//     code: {
//       type: String,
//       default: 'AsApplication'
//     }
//   },
  data() {
    return {
        processurl: process.env.NODE_ENV === "production" ? baseUrl.ROOT : baseUrl.ROOT,
        fileList: []
    }
  },
  watch: {
    // value(newValue, oldValue) {
    //   console.log(newValue, 'valStr')
    //   if (newValue) {
    //     this.fileList = []
    //     // 如果多个文件 process.env.VUE_APP_BASE_IMS_EXT + 'f-center/hadoop/hdfs/download?path=' +
    //     const files = newValue.split(',')
    //     for (let i = 0; i < files.length; i++) {
    //       const s = files[i].substring(files[i].lastIndexOf('/') + 1, files[i].length)

    //       const datas = {
    //         name: s,
    //         url: files[i]
    //       }
    //       this.fileList.push(datas)
    //     }
    //   }
    // }
  },
  created() {
  },
  methods: {
    /**
     * 自定义上传
     * @param elementUI 自动传的参数，这个参数就是文件对象
     */
    uploadResourceRequest(param) {
      param.status = 'uploading' // 文件上传状态
      param.percentage = 0 // 文件上传进度，这里设为0
      param.name = param.file.name // 文件名
      const uploadEvent = (progressEvent) => {
        this.progressPercent = Number(
          ((progressEvent.loaded / progressEvent.total) * 100).toFixed(2)
        )
      }
      debugger
      uploadOn('AsApplication', 'xxxt/image', '', param.file, 'yysd', uploadEvent).then(response => {
        // 请求成功
        const datas = {
          name: response.data.docFileName,
          url: this.processurl + 'f-center/hadoop/hdfs/download?path=' + response.data.docPath,
          path: response.data.docPath
        }
        this.fileList.push(datas)
        // 每次上传成功后就将 fileList 拼接返回给父组件
        let fileStr = ''
        const fileLists = this.fileList
        if (fileLists.length > 0) {
          for (let v = 0; v < fileLists.length; v++) {
            fileStr = fileLists[v].path + ','
          }
        }
        fileStr = fileStr.substring(0, fileStr.lastIndexOf(','))
        this.$emit('input', fileStr)
        param.status = 'success' // 上传成功后将status属性改成success
      }).catch(function(error) {
        // 请求失败处理
        console.log(error)
        param.status = 'failed'
        param.message = '上传失败'
      })
    },
    // 文件移除
    handleRemove(file) {
      const name = this.fileList.findIndex(item => {
        if (item.name == file.name) {
          return true
        }
      })
      console.log(file.url, '删除文件')
      // 调用删除接口
      del(file.url).then(response => {
        this.fileList.splice(name, 1)
        // 移除后重新给父组件赋值
        // 每次上传成功后就将 fileList 拼接返回给父组件
        let fileStr = ''
        const fileLists = this.fileList
        if (fileLists.length > 0) {
          for (let v = 0; v < fileLists.length; v++) {
            fileStr = fileLists[v].path + ','
          }
        }
        fileStr = fileStr.substring(0, fileStr.lastIndexOf(','))
        this.$emit('input', fileStr)
      })
    },
    // 文件预览
    handlePreview(file) {
      // 下载文件  或者在线预览
    },
    handleSuccess(response) {

    }
  }
}
</script>

<style lang="scss" scoped>
.editor-slide-upload {
  margin-bottom: 20px;
  ::v-deep .el-upload--picture-card {
    width: 20%;
  }
}
</style>