el-upload上传及回显文件

<template>
    <div style="display:flex">
      <div style="margin: 30px;">
        系统操作手册
      </div>
      <div class="uploads">
        <el-upload ref="upload"
                   :action="upload.url"
                   :name="upload.name"
                   :data="upData"
                   :limit="1"
                   :on-preview="handlePreview"
                   :on-remove="handleRemove"
                   :on-success="handleSuccess"
                   :on-error="handleError"
                   :before-upload="beforeUpload"
                   :on-exceed="handleExceed"
                   :on-change="handleFileChange"
                   :auto-upload="true"
                   :file-list="fileList"
                   style="margin: 20px;">
          <el-button plain
                     class="view-option">
            上传文件
          </el-button>
          <div slot="tip"
               class="el-upload__tip">
            温馨提示：操作手册用于供企业用户阅读并了解系统如何操作使用，支持文件格式：doc .docx .pdf，最多1个文件
          </div>
        </el-upload>
      </div>
    </div>
</template>

<script>
export default {
  name: 'OperationManualConfig',
  data() {
    return {
      upload: {
        url: '//file.geeker.com.cn/uploadOSS',
        key: '',
        // key: 'WN1EX00HLL8Y0O0K',  // 有效osskey
        path: 'cloud-platform',
        name: 'Filedata'
      },
      // 上传的文件列表
      fileList: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 文件上传之前处理
    beforeUpload() {
      // console.log(file);
      // const isExcel = file.name.substring(file.name.lastIndexOf('.') + 1);
      // console.log(isExcel);
      // const isLtSize = file.size / 1024 / 1024 < 1024;
      // console.log(isLtSize);
      // if (isExcel !== 'xls' && isExcel !== 'xlsx') {
      //   this.$message.error('上传文件只能是 xls/xlsx 格式!');
      // }
      // if (!isLtSize) {
      //   this.$message.error('上传文件大小不能超过 1 MB!');
      // }
      // return isExcel && isLtSize;
    },
    // 上传文件改变时候触发的方法
    handleFileChange(file) {
      console.log(file);
    },

    // 上传文件
    uploadFile(file) {
      console.log(file);

    },
    // 处理上传成功之后操作
   handleSuccess(resp, file, fileList) {
      this.fileList = fileList;//！！！！注意：这个地方要直接复制，不能拿file然后push到this.fileList里面去，push进去页面会跳动
      this.$api.saveOperationManual({ operationManual: resp.safeUrl }).then((res) => {
        console.log(res);
        if (res.code === 0) {
          this.fileList[0].id = res.data.id;
          const fileName = res.data.operationManual.split('/')[res.data.operationManual.split('/').length - 1];
          this.fileList[0].fileName = fileName;
          this.$notice.operateSuccess('上传成功');
        } else {
          this.$notice.operateError('上传失败', `${ res.message }`);
        }
      })
        .catch((error) => {
          this.$notice.operateError('上传失败', `${ error.data.message }`);
        });
    },
    // 处理上传失败之后操作
    handleError() {
      this.$message.error('上传失败');
    },
    // /删除文件
    handleRemove(file) {
      this.$api.deleteOperationManual(file.id).then((res) => {
        console.log(res);
        if (res.code === 0) {
          this.$notice.operateSuccess('删除成功');
          this.showFile = false;
          this.fileList = [];
          console.log(this.fileList);
        } else {
          this.$notice.operateError('删除失败', `${ res.message }`);
        }
      })
        .catch((error) => {
          this.$notice.operateError('删除失败', `${ error.message }`);
        });
    },
    // 下载文件
    handlePreview(file) {
      // 创建a标签
      const link = document.createElement('a');
      // download属性
      link.setAttribute('download', file.name);
      // href链接
      link.setAttribute('href', file.operationManual);
      // 自执行点击事件
      link.click();

    },
    // 处理超出文件选择范围
    handleExceed() {
      this.$message.warning('当前限制上传 1 个文件');
    },
    // 查询文件
    getList() {
      this.$api.operationManual().then((res) => {
        console.log(res);
        if (res.code === 0 && res.data) {
          const fileName = res.data.operationManual.split('/')[res.data.operationManual.split('/').length - 1];
          this.fileList.push({ ...res.data,
                               name: fileName });
        }
      })
        .catch((error) => {
          this.$notice.operateError('获取失败', `${ error.message }`);
        });
    }
  }
};
</script>

<style lang="scss" scoped>

@include b(scenic-oss) {
  @include e(form) {
    .uploads{
      display: flex;
      flex-direction: column;
    }

  }
}
</style>

效果：：：：

默认显示！！！！

鼠标放上去！！！！点击蓝字是下载，点击叉是删除