vue el-upload上传二次封装

vue yekong

使用

          <uploadFile
            :transactTemplateName.sync="scope.row.transactTemplateName"
            :transactTemplatePath.sync="scope.row.transactTemplatePath">
            <el-link type="primary" :underline="false">上传</el-link>
          </uploadFile>

代码

/**
* @Author: 858834013@qq.com
* @Name: UploadFile
* @Date: 2022-05-15
* @Desc: 上传文件
*/
<template>
  <div>
    <el-upload
      action="/rs/sys/configure/businessMain/uploadFile"
      :show-file-list="false"
      :with-credentials="true"
      :on-success="accessToFile"
      :file-list="fileList"
      name="file">
      <slot></slot>
    </el-upload>
  </div>
</template>

<script>

export default {
  name: 'UploadFile',
  props: {
    transactTemplateName: {
      type: String,
      default() {
        return ''
      }
    },
    transactTemplatePath: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    accessToFile(e) {
      var that = this
      that.$message({
        message: '上传成功',
        type: 'success'
      })
      that.$emit('update:transactTemplateName', e.data.transactTemplateName)
      that.$emit('update:transactTemplatePath', e.data.transactTemplatePath)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

喜欢