场景:一次只能上传一个文件,单选文件上传、输入文件名、拖拽、最大50M,支持ppt/word/excel/pdf/jpg/png/,取消上传,可上传多个,删除文件。
效果:
组件index.vue
<template>
<div class="applyUpload">
<div class="apply_content">
<div class="upload_content">
<div class="upload_item">
<div class="fileName"><i style="color:red">*</i>文件名称:</div>
<el-input v-model="fileName" maxlength="10" show-word-limit clearable></el-input>
</div>
<div class="upload_item">
<el-upload v-loading="loading" class="avatarUpload" action="#" :accept="fileAccepteList"
:on-change="beforeAvatarUpload" :on-progress="progress" :http-request="handleRequest" drag ref="upload"
:auto-upload="false" :limit="1" :on-exceed="limitCheck" :on-remove="handleRemove">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">只允许上传{
{
fileAccepteList}}格式的文件,且文件大小不超过50M</div>
</el-upload>
</div>
<div class="upload_item">
<div class="upload_btn">
<div class="confirm" v-if="loading == false && fileNum > 0" @click="uplaodConfirm">确定上传</div>
<div class="cancel" v-if="loading == true" @click="closeUploadDialog">取消上传</div>
</div>
</div>
</div>
<div class="fileList">
<div class="file_item" v-for="(item,index) in allFileList2" :key="index">
<div class="file_info">
<div>{
{
index+1}}.</div>
<div :title="item.fileName">{
{
item.fileName}}</div>
</div>
<div class="del_btn">
<div>{
{
item.filePhoto}}</div>
<div>{
{
(item.fileSize/1024/1024).toFixed(2)}}M</div>
<div @click="delFile(item,index)">
<i class="el-icon-close"></i></div> </div>
</div>
</div>
</div>
<span class="footer_btn">
<el-button type="" @click.native="cancel">取消</el-button>
<el-button type=