elementui使用el-upload组件如何实现自定义上传

使用el-upload组件实现自定义上传

方式一:选择后自动上传

使用 http-request 覆盖默认的上传行为,可以自定义上传的实现

利用 before-upload 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise且被 reject,则停止上传

template 部分


    部署流程定义
 

js 部分

beforeUpload (file) { // 上传文件之前钩子
  const type = file.name.split('.')[1]
  if (type !== 'bpmn') {
    this.$message({ type: 'error', message: '只支持bpmn文件格式!' })
    return false
  }
},
uploadBpmn (param) { // 部署流程定义(点击按钮,上传bpmn文件,上传成功后部署,然后重新加载列表)
  const formData = new FormData()
  formData.append('processDefinition', param.file) // 传入bpmn文件
  this.$API({
    name: 'deploy',
    data: formData,
    headers: {'Content-Type': 'multipart/form-data'}
  }).then(res => {
    if (res.data.code == 0) {
      this.$message({ type: 'success', message: res.data.msg })
    } else {
      this.$message({ type: 'error', message: res.data.msg })
    }
  }).catch(error => {
    this.$message({ type: 'error', message: error })
  }).finally(() => {
    this.getList()
  })
},

如果不想上传成功后显示上传文件列表,可以隐藏掉文件列表

可以在组件中设置 :show-file-list="false"

或者

::v-deep .el-upload-list {
  display: none !important;
}

方式二:选择后手动上传

使用el-upload上传文件夹

只需要为 input 输入框设置 webkitdirectory 属性

  mounted() {
    if (this.$route.query.type === 'folder') {
      this.$nextTick(() => {
        document.querySelector('.el-upload__input').webkitdirectory = true
      })
    }
  },

封装elementui el-upload文件上传组件

// 自定义的全局组件my-component
let _utils = new Utils()
Vue.component(
    'uploadfile', {
        props: {
            uploaddata: {
                type: Object
            }
        },
        template: `
表名称:{{uploaddata.sheetname}} 选择文件
`, data() { return {} }, methods: { /* 上传文件之前的钩子,参数为上传的文件, 若返回 false 或者返回 Promise 且被 reject,则停止上传。 */ beforeUpload(file){ const fileSuffix = file.name.substring(file.name.lastIndexOf(".")+1); const whiteList = ["xls", "xlsx"]; if (whiteList.indexOf(fileSuffix) === -1) { _utils.MessageError(this,"上传文件只能是xls、xlsx格式") return false; } const isLt2M = file.size / 1024 / 1024 < 5; if (!isLt2M) { _utils.MessageError(this,"上传文件大小不能超过5MB") return false; } }, handleRemove(file, fileList) { }, handleSuccess(response, file, fileList) { let {code, msg} = response if (code == 0) { utils.MessageSuccess(this, "文件上传成功") } else { utils.MessageError(this, msg) } }, /* 点击文件列表中已上传的文件时的钩子 */ handlePreview(file) { // console.log(file); }, /* 文件超出个数限制时的钩子 */ handleExceed(files, fileList) { }, /* 删除文件之前的钩子,参数为上传的文件和文件列表, 若返回 false 或者返回 Promise 且被 reject,则停止删除 */ beforeRemove(file, fileList) { // return this.$confirm(`确定移除 ${file.name}?`); } } } )

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

你可能感兴趣的:(elementui使用el-upload组件如何实现自定义上传)