功能简单,从官方文档出发即可,废话不多说,上代码一看便知!
<el-upload
class="upload-demo"
action="后端上传接口路径"
:on-change="handleChange"
:file-list="fileList"
:before-upload="beforeupload"
:on-remove="remove"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传pdf文件</div>
</el-upload>
<script>
export default {
data() {
return {
};
},
methods: {
beforeupload(file){
let fileType=['pdf']
let type=file.name.split(".").slice(-1)[0].toLowerCase()//截取文件后缀做比较
if(!fileType.includes(type)){
setTimeout(() => {
this.$message({
message: "格式错误",
type: "error",
})
},50)
return false
}
return true;
},
remove(file,fileList){
this.$http.get("后端删除接口路径" ,//这里我后端写的接口是根据文件id删除
{ params: { fileId:file.response.fileId}})
},
}
</script>