使用element-ui的el-upload实现自定义上传及滚动条功能。

<template>
  <div class="container page-card-box">
    <div class="form-wrapper-box">

      <el-form ref="form" :model="form" label-width="120px">
        
        <el-form-item label="文件：" prop="imagesPic">
          <el-upload
            class="upload-demo"
            :action="`${baseUrl}/uploads/`"
            :headers="upHeaders"
            :http-request="handleUpload"
            :before-upload="beforeUpload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :file-list="fileList"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传zip格式文件，且大小不超过50MB</div>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button style="width: 60%; margin-top: 60px" type="primary" @click="onSubmit">提 交</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
import { MessageBox } from 'element-ui'
import { upload } from '@/api/common'

export default {
  name: 'Diagnose',
  components: {},
  data() {
    return {
      baseUrl: '/', // 没有实际作用
      upHeaders: null,
      fileList: [],
      imgUrlList: [],
      form: {}
    }
  },
  computed: {},
  methods: {
    onSubmit() {
    },
    resetForm() {
      this.form = {}
      this.fileList = []
      this.imgUrlList = []
    },
    beforeUpload(file) {
      const type = file.name.substring(file.name.lastIndexOf('.')) // 获取文件后缀，取文件格式
      const isLt10M = file.size / 1024 / 1024 < 50
      if (type !== '.zip') {
        this.$message({ type: 'error', message: '只支持zip文件格式！' })
        return false
      }
      if (!isLt10M) {
        this.$message({
          message: '上传文件大小不能超过 50MB!',
          type: 'warning'
        })
        return false
      }
    },
    // 自定义上传
    handleUpload(op) {
      console.log('upfile===>', op)
      const file = op.file
      // const fileType = params.type
      const formData = new FormData()
      formData.append('file', file)
      upload(formData, res => {
        op.onProgress(res)
      })
        .then(res => {
          // console.log('up-res:====>', res)
          op.onSuccess(res) // op.onSuccess({}) // 上传成功回调
        })
        .catch(error => {
          // op.onError('文件上传失败(' + error.response.status + '),' + error.response.data)
          op.onError()
          const message = error.data && error.data.msg ? error.data.msg : '上传出错，请稍后再试'
          this.$message({ message: message, type: 'warning' })
        })

      // axios({
      //   method: 'post',
      //   url: `${process.env.VUE_APP_BASE_API}/uploadFile`,
      //   headers: { 'Content-Type': 'multipart/form-data', Authorization: 'Bearer ' + getToken() },
      //   data: formData，
      // onUploadProgress(progressEvent) {
      // if (progressEvent.lengthComputable) {
       // const percent = (progressEvent.loaded / progressEvent.total) * 100 || 0
     //   progressCallback({
      //    percent: percent
     //   })
     // }
   // }
      // })
      //   .then(res => {
      //     console.log('up-res:====>', res)
      //     op.onSuccess('上传文件成功') // op.onSuccess({})
      //   })
      //   .catch(error => {
      //     console.log('upload file error:', error)
      //     const message = error.data.message ? error.data.message : '服务器错误'
      //     op.onError('文件上传失败(' + error.response.status + '),' + error.response.data)
      //     this.$message({ message: message, type: 'warning' })
      //   })
    },
    handleRemove(file) {
      // console.log('remove_file', file)
      if (file.response) {
        // 本次上传的
        this.imgUrlList.splice(
          this.imgUrlList.findIndex(v => v.file_name === file.response.data.file_name),
          1
        )
      } else {
        this.imgUrlList.splice(
          this.imgUrlList.findIndex(v => v.file_name === file.file_name),
          1
        )
      }
    },
    handlePreview() {
      // console.log(file);
    },
    handleSuccess(res) {
      // console.log('file_upload_res===>', res)
      // if (res.code === '0') {
      //   this.imgUrlList.push({ file_name: res.data.file_name, upload_time: res.data.upload_time })
      // }
      if (res.code === '0') {
        // 只上传一个，取最后一个上传成功的文件
        this.imgUrlList = [
          { file_name: res.data.file_name, upload_time: res.data.upload_time, hash_file: res.data.hash_file }
        ]
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    handleLinkTo() {
      this.$router.push({
        path: '/record/index',
        query: {}
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

我封装了一个upload请求方法。代码逻辑，其实和注释掉的axios调用的上传方法类似。