element-ui文件上传-自己封装的

文件上传

1。上传

<template>
  <div class="collapseInfo">
    
                  <upload
                    ref="upload"
                    :on-change="changeFile"
                    :on-success="handleSuccess"
                    :on-delete="onFileDelete"
                    :data="upLoadData"
                    :file-list="fileList"
                    :auto-upload="true"
                    :limit="10"
                    :action="importFileUrl"
                    file-ref="fileRef2"
                  />
               
  </div>
</template>

<script>
import upload from '@/components/upload'
import {
  upLoadFile,
  getFileDetail,
  delFile,
  downLoadFile
} from '@/api/bidding/common/common'

export default {
  name: 'ItemInformation',
  components: {
    upload
  },
  data() {
    return {
      // 批文附件上传
      importFileUrl: upLoadFile, // 上传地址
      downLoadFileUrl: downLoadFile, // 下载地址
      upLoadData: {
        cgformName: 't_b_tender_project',
        cgformField: 'projectAttachment',
        cgformId: ''
      },
      fileList: [],
      fileListData: [],
  },
  mounted() {
        // 获取附件
        for (let i = 0; i < len; i++) {
            const fileData = {
              name: this.fileListData[i].attachmenttitle + '.' + this.fileListData[i].extend,
              url: this.fileListData[i].realpath,
              id: this.fileListData[i].id,
              downLoadFileUrl: this.downLoadFileUrl,
              raw: {
                type: this.fileListData[i].extend
              }
            }
            this.fileList.push(fileData)
          }
   
  },
  methods: {
    // 附件信息上传
    changeFile(file, fileList) {
      this.fileList = fileList
    },
    // 删除附件信息
    onFileDelete(file) {
      console.log(file)
      if (file.id) {
        delFile(file.id).then(response => {
        }).catch(res => {

        })
      }
    },
    // 附件信息成功的时触发
    handleSuccess(response, file, fileList) {
      file.id = response.data.fileKey
    }
  }
}
</script>

<style lang="less">
</style>

updata.vue文件

<template>
  <div class="file">
    <el-upload
      v-show="fileList.length<limit"
      :ref="fileRef"
      :action="action"
      :headers="headers"
      :data="data"
      :multiple="multiple"
      :name="name"
      :show-file-list="showFileList"
      :before-upload="beforeUpload"
      :before-remove="beforeRemove"
      :on-remove="onRemove"
      :on-change="onChange"
      :on-success="onSuccess"
      :on-error="onError"
      :file-list="fileList"
      :auto-upload="autoUpload"
      :disabled="disabled"
      :limit="limit"
      :on-exceed="onExceed"
      :accept="accept"
      :on-preview="onPreview"
      class="uploaData">
      <el-button slot="trigger" type="upload" icon="iconfont icon-icon_upload">点击上传</el-button>
      <span v-if="tipText!==''" slot="tip" :class="tipStyle" v-text="tipText"/>
    </el-upload>
    <ul v-show="fileList.length>0" class="file-list clearfix">
      <li v-for="(item,index) in fileList" :key="index" class="fl">
        <div v-if="itemType(item.raw.type)" class="file-other clearfix">
          <a :href="item.downLoadFileUrl+item.id" :download="item.name" class="fl">
            <i class="iconfont icon-icon_file"/>{{ item.name }}
          </a>
          <span class="delete fr pointer" @click="onFileDelete(index)">
            <i class="iconfont icon-guanbi"/>
          </span>
        </div>
        <div v-else class="file-image clearfix">
          <a :href="item.downLoadFileUrl+item.id" :download="item.name" class="fl">
            <img :src="item.url" :alt="item.name">
          </a>
          <a :href="item.url" :download="item.name" class="fl name spot">
            {{ item.name }}
          </a>
          <span class="delete fr pointer" @click="onFileDelete(index)">
            删除
          </span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
//  上传
function noop() {
}

export default {
  name: 'Upload',
  props: {
    fileRef: {
      type: String,
      default: 'fileRef'
    },
    tipText: {
      type: String,
      default: ''
    },
    tipStyle: {
      type: String,
      default: 'tip-text'
    },
    action: {
      type: String,
      required: true
    },
    headers: {
      type: Object,
      default() {
        return {}
      }
    },
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    accept: {
      type: String,
      default: ''
    },
    multiple: {
      type: Boolean,
      default: true
    },
    name: {
      type: String,
      default: 'file'
    },
    showFileList: {
      type: Boolean,
      default: false
    },
    beforeUpload: {
      type: Function,
      default: noop
    },
    beforeRemove: {
      type: Function,
      default: noop
    },
    onRemove: {
      type: Function,
      default: noop
    },
    onChange: {
      type: Function,
      default: noop
    },
    onSuccess: {
      type: Function,
      default: noop
    },
    onError: {
      type: Function,
      default: noop
    },
    fileList: {
      type: Array,
      default() {
        return []
      }
    },
    autoUpload: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 0
    },
    onExceed: {
      type: Function,
      default: noop
    },
    onPreview: {
      type: Function,
      default: noop
    },
    onDelete: {
      type: Function,
      default: noop
    }
  },
  methods: {
    submitUpload() {
      this.$refs[this.fileRef].submit()
    },
    itemType(type) {
      return !(type.indexOf('image') >= 0)
    },
    onFileDelete(index) {
      const file = this.fileList.splice(index, 1)
      this.onDelete(file[0])
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../assets/style/public.less";

  .file {
    .uploaData{
      margin-bottom: 16px;
    }
    .tip-text {
      color: @orange;
      padding: 0 8px;
    }
    .mb16 {
      margin-bottom: 16px;
    }
    .file-list {
      color: @blue;
      .file-other {
        padding: 0 16px;
        background-color: @french-grey;
        border-radius: 4px;
      }
      .file-image {
        img {
          max-width: 50px;
          max-height: 50px;
          border-radius: 8px;
          margin-top: 0px;
          margin-right: 8px;
        }
        .name {
          max-width: calc(100% - 110px);
          min-width: 100px;
        }
      }
      .delete {
        margin-left: 16px;
        color: @font;
      }
      a {
        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .iconfont {
          margin-right: 8px;
        }
      }
      li {
        margin-bottom: 16px;
        margin-right: 8px;
      }
      li:last-child {
        margin-right: 0;
      }
    }
  }
</style>