常规el-upload组件 使用http-request 覆盖默认的上传行为,可以自定义上传的实现
<div class="upload-demo">
<el-upload
drag
action="#"
:http-request="uploadImage"
accept=".xls,.xlsx,.csv"
:on-error="upError"
:on-remove="upRemve"
:on-change="upChange"
:file-list="fileList">
<img class="icon-upload" src="xxxxxxxxx/images/icon-upload.png" alt="">
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="upload__type">支持扩展名:.xls .xlsx .csv</div>
</el-upload>
</div>
data() {
return {
fileList: [],
SystemUrl: 'xxxxxxxx.upload' //上传链接
}
},
// 自定义上传方法
uploadImage(file) {
var formData = new FormData()
formData.append('file', file.file)
var requestConfig = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
axios.post(this.SystemUrl, formData, requestConfig)
.then((res) => {
if (res.serviceCode === 100) {
this.$message({
showClose: true,
message: '文件上传成功',
type: 'success'
})
} else {
this.fileList = []
this.$message({
showClose: true,
message: res.serviceMessage,
type: 'error'
})
}
})
},
// 上传失败
upError() {
this.fileList = []
this.$message({
type: 'error',
message: '文件上传失败',
showClose: true
})
},
// 上传的文件改变时(覆盖原来的文件)
upChange(file, fileList) {
if (fileList.length > 0) {
this.fileList = [fileList[fileList.length - 1]]
}
},
// 移除列表
upRemve(file) {
// console.log(file)
},