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

2,378

因为默认的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>