element el-upload 自定义上传限制上传文件的类型

最新推荐文章于 2024-08-05 15:11:23 发布

dangsh_

最新推荐文章于 2024-08-05 15:11:23 发布

阅读量2.7k

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/dangsh_/article/details/114036312

版权

前端专栏收录该内容

5 篇文章 2 订阅

订阅专栏

"本文档展示了如何在Vue项目中使用Element UI的el-upload组件自定义上传功能，特别是限制用户只能上传PDF文件。通过设置`accept=".pdf"`来指定文件类型，并在`httpRequest`方法中进一步验证文件扩展名，确保上传的安全性。同时，提供了完整的模板和脚本代码示例，包括文件上传成功后的处理逻辑。"

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

因为默认的el-upload 用起来不舒服，于是使用自定义上传
在这里插入图片描述

主要配置是

action="#"
:auto-upload="false"
:http-request="httpRequest"

在httpRequest 中，就可以自定义上传方法了

accept=".pdf"设置为只允许上传pdf，只会
在这里插入图片描述
在这里限制，用户还是可以上传别的
所以需要在上传时判断文件名

var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
const extension = testmsg === 'pdf'
if (!extension) {
  continue
}

<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label>
            <h1 style="font-size:30px">发布重要文件</h1>
          </el-form-item>
          <!-- <el-form-item label="文件名">
            <el-input placeholder="文件名, 如不填则为原文件名" v-model="title"></el-input>
          </el-form-item> -->
          <el-form-item label="选择文件">
            <el-upload
              class="upload-demo"
              drag
              ref="upload"
              action="#"
              :auto-upload="false"
              :on-change="OnSuccess"
              :on-remove="OnRemove"
              :http-request="httpRequest"
              :file-list="fileList"
              accept=".pdf"
              multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传 pdf 文件</div>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :disabled="isAble" @click="onSubmit">立即发布</el-button>
          </el-form-item>
          <el-form-item>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import api from '@/api/index'
export default {
  name: 'FileAdd',
  data: function () {
    return {
      enclosureIDs: [],
      title: '发布消息',
      isAble: false,
      fileList: [],
      form: {
        title: '123'
      }
    }
  },
  methods: {
    OnSuccess (file, fileList) {
        this.fileList = fileList
    },
    OnRemove (file, fileList) {
        this.fileList = fileList
    },
    onSubmit () {
        if (this.fileList.length === 0) {
            return
        }
        const that = this
        for (var i in this.fileList) {
            var file = this.fileList[i]
            var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
            const extension = testmsg === 'pdf'
            if (!extension) {
              continue
            }
            const reader = new FileReader()
            reader.readAsDataURL(file.raw)
            reader.fileName = file.name
            reader.onload = function (readerEvt) {
                var base64Str = this.result
                if (base64Str === 'data:') {
                    // 为空txt时下载的时候会显示网络错误，这里进行处理转换为有一个空格的txt
                    base64Str = 'data:text/plain;base64,IA=='
                }
                that.$http
                    .post(api.ImportantFile, { params: { name: readerEvt.target.fileName, base64Str: base64Str }
                        })
                    .then(res => {
                    })
            }
        }
        that.fileList = []
        that.$router.push({
                  path: '/important_file/'
              })
    },
    selectChanged (value) {
    },
    httpRequest (options) {
    }
  },
  created: function () {
  },
  mounted () {
  },
  activated () {
  }
}
</script>
<style>
</style>