Because the default el-upload is uncomfortable to use, a custom upload is used

The main configuration is

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

In httpRequest, you can customize the upload method

Accept =”.pdf” is set to allow only PDF uploadsIn this case, the user can still upload something else so you have to check the file name when you upload it

var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1) const extension = testmsg === 'pdf' if (! extension) { continue }Copy the code
<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">Publish important documents</h1>
          </el-form-item>
          <! -- <el-form-item label=" name ">< el-input placeholder=" title"></el-input> </el-form-item> -->
          <el-form-item label="Select file">
            <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">Drag the file here, or<em>Click on the upload</em></div>
              <div class="el-upload__tip" slot="tip">Only PDF files can be uploaded</div>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :disabled="isAble" @click="onSubmit">Immediately release</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: 'Publish the message'.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:') {
                    // If the TXT file is empty, it will display a network error
                    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>

Copy the code