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