1> 接口接收的文件是: file.raw
2>当只能上传一个文件,并自动替换的是判断 fileList.length > 1,并取 fileList.splice(0, 1);
3>一般取值和判断逻辑会在 on-change 里写
4>选取文件和 上传是两个步骤
html完整的代码
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-change="handleChange"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false"
:limit="1"
:on-exceed="handleExceed">
<el-button slot="trigger" size="small">选取文件</el-button>
<el-button size="small" @click="upload">上传</el-button>
<span class="el-text-red">提示</span>
</el-upload>
js-所有的绑定函数
handlePreview(file) {
console.log(file);
},
//on-change事件 取文件 和一些判断
handleChange(file, fileList) {
//只限制上传一个文件时,自动替换
if (fileList.length > 1) {
fileList.splice(0, 1);
}
// .doc、.docx、.docm
let_fileType = file.raw.type
if ([''].includes(_fileType)) {
this.file = file.raw
this.param = new FormData()
this.param.append('files', file.raw);
}
else {
this.$message({
message: '只允许上传后缀名为.doc、.docx、.docm的文件',
type: 'warning'
})
this.fileList = []
}
},
handleRemove(file, fileList) {
this.param = ''
},
handleExceed(files, fileList) {
this.$message.warning('只能选择一个文件');
},
//调用上传接口
upload() {
let that = this
if (that.param == '') {//that.param 存储上传文件的变量
this.$message({
message: '请先选择一个文件!',
type: 'warning',
})
return false
}
//上传接口 调用上传接口逻辑
},