文件上传组件(elementUI)

最新推荐文章于 2024-08-29 07:30:44 发布

山海一哥

最新推荐文章于 2024-08-29 07:30:44 发布

阅读量1.4k

点赞数 1

分类专栏：组件 vue element-ui 文章标签： vue

本文链接：https://blog.csdn.net/qq_43702430/article/details/118787105

版权

vue 同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

element-ui

14 篇文章 0 订阅

订阅专栏

组件

4 篇文章 0 订阅

订阅专栏

本文介绍如何在Vue.js项目中封装elementUI的上传组件，以提高代码复用性和定制化。通过设置不同的属性如action、headers、accept等，实现文件上传功能，并在成功或失败时触发相应的回调函数。组件还允许自定义上传按钮样式，以适应项目需求。

摘要由CSDN通过智能技术生成

elementUI提供了上传的组件，然而项目中可能多次用到，每次都用官网的修改，过于繁琐，封装成组件。

<template>
<el-upload class="upload-demo" :action="uploadPath" :headers="fileHeaders" :data='uploadData' :show-file-list="false" :accept="accept" :on-success="handleSuccess" :on-error="handleError" :before-upload="beforeUpload">
<!--下面是封装的按钮，可修改为你想用的任何东西 -->
  <com-button type="btn_import"></com-button>
</el-upload>
</template>

<script>
// axios 请求的路径
import * as url from '@/config/urlConfig'
import ComButton from '@/components/comButton'
export default {
  name: 'FileUpload',
  components: {
    ComButton
  },
  props: {
    fileType: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
    //  this.$api.getBaseUrl() 返回的是基础请求路径，也可直接使用process.env.baseUrl
      uploadPath: this.$api.getBaseUrl() + url.EXCEL_IMPORT,
      uploadData: {
        userCode: this.$api.sGetObject('userCode'),
        fileType: this.fileType
      },
      fileHeaders: {
        token: this.$api.sGetObject('token')
      },
      accept: '.xlsx, .xls'
    }
  },
  methods: {
    handleSuccess (res, file, fileList) { },
    handleError (err, file, fileList) { },
    beforeUpload (file) { }
  },
  created () {}
}
</script>

<style scoped>
.upload-demo {
  float: left;
  height: 40px;
}
</style>

使用方式引入组件进行注册
import FileUpload from ‘@/components/FileUpload’