利用Element-UI的upload组件实现文件的上传以及样式变化
最近在做项目的时候遇到在浏览器中上传视频的需求，使用Element-UI的upload组件。具体效果如下
总的来说是很简单的，但一定要仔细对照官方文档，并且因为我使用了typescript，其中也遇到了一个坑。
对照了一下官方文档，所需要注意的部分：
- 只能上传一个视频并且禁止多选
:limit="1"，accept="video/*"，:multiple="false"， - 当重复上传时弹出错误弹窗
:on-exceed="exceed" - 当有文件被选中时，样式会如图发生变化
- 同时实现选择上传与拖拽上传
- 手动上传，即用户选中上传按钮之后才进行上传
:auto-upload="false" - 上传中后台返回进度，并利用
<el-progress>显示实时进度（因为目前还没有后台数据所以这部分还是静态的）
具体代码如下：
<div class="upload" v-show="!uploadTrue">
<el-upload ref="upload" drag action="https://jsonplaceholder.typicode.com/posts/" accept="video/*" :multiple="false" :limit="1" :on-remove="remove" :on-change="handleChange" :file-list="fileList" :on-exceed="exceed" :auto-upload="false" :on-progress="uploading">
<img src="../../../static/imgs/upload_img_file.png" alt="" class="uploadImg">
<p class="text1">拖拽文件至此区域</p>
<p class="text2" id="text2">或</p>
<p class="text3" id="text3">浏览本地文件</p>
</el-upload>
</div>
methods: {
uploading() {
//上传中
console.log("uploading")
if (this.uploadProgress == 100) {
//上传完成
this.uploadStatus = true
}
},
handleChange() {
//添加文件（样式变化）
var el:any = document.getElementById("text2")
var ele:any = document.getElementById("text3")
if(this.fileList != null) {
el.style.display = "none"
ele.style.display = "none"
}
},
remove() {
//删除视频的钩子
var el:any = document.getElementById("text2")
var ele:any = document.getElementById("text3")
el.style.display = "inline-block"
ele.style.display = "inline-block"
},
exceed() {
//重复选择文件,弹出错误弹窗
this.$alert("最多仅支持上传一个视频文件")
},
uploadVideo() {
//上传文件
let element:any = this.$refs.upload
element.submit();
//
//开始上传
//服务端返回进度uploadProgress
this.uploadTrue = true
}
}
使用typescript中遇到的坑
根据官方文档，当使用手动上传时在<el-upload> 中 使用 ref="upload"，并在上传的函数中使用this.$refs.upload.submit()。但是，一直报错
Property 'submit' does not exist on type 'Vue | Element | Vue[] | Element[]'.
Property 'submit' does not exist on type 'Vue'.
上网查了很久，发现是在typescript中无法识别vue中的$refs并且ts使用强类型，必须先使用any来进行声明
let element:any = this.$refs.upload
element.submit();
查看29道真题和解析