vue+elementui 实现上传文件/导入文件的功能

id="article_content" class="article_content clearfix"> id="content_views" class="markdown_views prism-atom-one-dark">

vue+elementui 实现上传文件/导入文件的功能

1. 上传组件

<el-form-item label="上传文件：">
  <el-upload
    action=""
    :file-list="fileList"
    :show-file-list="false"
    :http-request="handUpLoad"
    drag
    :limit="1"
    :accept="'.xls, .xlsx'"
  >
    <i class="el-icon-upload" />
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  </el-upload>
  <ul class="downloadFile">
    <li v-for="(val, index) in fileList" :key="index">
    <a class="el-upload-list__item-name" href="javascript:;"><i class="el-icon-document" />{{ val.fileName }}</a>
    <i class="el-icon-close" @click="handleFileRemove(val)" />
    </li>
    <li v-show="fileLoading"><i class="loading el-icon-loading" /> </li>
  </ul>
</el-form-item>
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
class="hide-preCode-box">
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

2. data中的数据

data() {
  return {
    fileList: [],
    fileLoading: false,
    fileobj: ''
  }
}
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

3. methods中的方法

① 选择文件
handUpLoad(fileobj) {
  this.fileobj = fileobj
  this.fileList = [{
    fileName: fileobj.file.name,
    fileSize: fileobj.file.size
  }]
}
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
② 点击确定，调用接口上传文件
submit() {
  if (this.fileList.length === 0) {
    this.$message({
      message: '请先上传文件',
      type: 'warning'
    })
    return
  }
  const param = new FormData()
  param.append('file', this.fileobj.file)
  // 调用上传文件的方法--fileImport
  fileImport(param).then(res => {
    this.$message({
      type: 'success',
      message: '上传成功'
    })
  }).catch(err => {
    this.$message.error(err)
  }).finally(() => {
    this.$emit('refresh')
  })
 }
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
class="hide-preCode-box">
③ 删除文件
handleFileRemove() {
  this.fileList = []
}
 class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}">
  • 1
  • 2
  • 3
>>
注：本文转载自blog.csdn.net的最初@的文章"https://blog.csdn.net/weixin_45393413/article/details/146016058"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
复制链接
相关推荐
发表评论

评论记录：

未查询到任何数据！