问题
1、仅上传单个文件时,文件选择无法实现替换功能
2、自定义上传文件时,如果el-upload不上传文件,触发不了http-request问题
代码及解决方案
问题一解决方案:
不限制limit,on-change钩子函数中验证当列表大于等于1个的时候替换文件
uploadChange(file, fileList) {
// 验证文件数量,替换后仅保留第一个文件
if (fileList.length > 1) {
fileList.splice(0, 1)
}
},
问题二解决方案:
通过on-change钩子函数获取选择文件,再使用this.$refs.upload.submit()或直接使用FormData上传。
文件已经在钩子函数处理,上传方式感觉没有明显区别,任选其一即可
代码片段:( 直接使用FormData )
<el-upload ref="upload" drag action="#" :auto-upload="false"
:multiple="false" :on-change="uploadChange" :on-remove="uploadRemove">
<i class="el-icon-upload"></i>
<div class="el-upload__text">
<span>点击或将文件拖拽到这里上传</span>
<div style="margin-top: 10px; color:#aaa">支持扩展名:.zip</div>
</div>
</el-upload>
<div>
<el-button size="small"> 取 消</el-button>
// 直接使用FormData
<el-button type="primary" size="small" @click="handleUploadFile" :loading="uploadLoading"> 确 定</el-button>
</div>
// on-change钩子,保存file文件+替换文件
uploadChange(file, fileList) {
this.file = file.raw
// 问题一方案:验证文件数量,替换后仅保留第一个文件
if (fileList.length > 1) {
fileList.splice(0, 1)
}
},
// on-remove钩子,清空文件
uploadRemove() {
this.file = null
},
// 放弃submit()方法直接使用FormData上传()
handleUploadFile() {
if (!this.file) {
return errorMsg('请选择上传文件!')
}
if (!this.description) {
return errorMsg('描述不能为空!')
}
const reg = /^[0-9a-zA-Z-_.]{1,}$/
if (!reg.test(this.file.name)) {
return errorMsg('服务名称不能包含特殊符号!')
}
this.uploadLoading = true
// new FormData()
const formData = new FormData()
formData.append('description', this.description)
formData.append('file', this.file)
// 调用上传接口...
service.upload(this.appType, formData).then(res => {
successMsg(res.data)
this.uploadLoading = false
}).catch(() => {
this.uploadLoading = false
})
},
// 利用
代码片段:( 覆盖默认上传行为,配合http-request使用 )
<el-upload ref="upload" class="upload-demo" drag action="customize" :auto-upload="false"
:multiple="false" :on-change="uploadChange" :on-remove="uploadRemove" :http-request="uploadFile">
<i class="el-icon-upload"></i>
<div class="el-upload__text">
<span>点击或将文件拖拽到这里上传</span>
<div style="margin-top: 10px; color:#aaa">支持扩展名:.zip</div>
</div>
</el-upload>
<div slot="footer" style="text-align:right">
<el-button size="small"> 取 消</el-button>
<el-button type="primary" size="small" @click="handleUploadFile" :loading="uploadLoading"> 确 定</el-button>
</div>
uploadChange(file, fileList) {
this.file = file.raw
if (fileList.length > 1) {
fileList.splice(0, 1)
}
},
uploadRemove() {
this.file = null
},
handleUploadFile1() {
if (!this.file) {
return errorMsg('请选择上传文件!')
}
if (!this.description) {
return errorMsg('描述不能为空!')
}
const reg = /^[0-9a-zA-Z-_.]{1,}$/
if (!reg.test(file.name)) {
return errorMsg('服务名称不能包含特殊符号!')
}
this.$refs.upload.submit()
},
// 覆盖默认上传行为
uploadFile(params) {
const file = params.file
this.uploadLoading = true
const formData = new FormData()
formData.append('description', this.description)
formData.append('file', file)
service.upload(this.appType, formData).then(res => {
successMsg(res.data)
this.uploadLoading = false
}).catch(() => {
this.uploadLoading = false
})
}
参考帖子:
1、element el-upload 上传一个文件时候替换
2、使用el-upload不上传文件,触发不了http-request问题