需求：Vue项目中使用element-ui的el-upload上传文件，由于页面中除了文件上传，还有表单数据需要一起提交，所以不能使用el-upload的默认上传，而官方文档提供了http-request自定义上传方法来覆盖组件默认的上传方式，如下图：
image.png
所以我们可以在自定义上传方法中，配合使用axios来提交上传文件
需要注意的是：
自定义的上传方式就是模拟html表单上传文件，所以我们使用new FormData()来向后台传送文件，
而el-upload上传文件是一个一个文件上传的，所以我们可以在on-change函数里面遍历fileList，把每个子项的 raw(File文件) 取出来，放在一个数组里面保存，在自定义上传方法里，用FormData格式，每次取数组中的第一个进行递归上传，每取一个文件，上传文件数组里就删除一个，数组为空则不再递归运行(自定义上传方法)，具体代码如下：
<template>
<div class="inside-base">
<div class="up-filebox">
<i class="tips" v-show="showUpFile">可上传pdf、ppt、word、excel等不超过25M</i>
<el-upload
action=""
:auto-upload="false"
:multiple="true"
:http-request="myUploadFile"
accept=".pdf,.PDF,.doc,.docx,.xls,.xlsx,.ppt,.pptx"
:file-list="fileList"
:on-change="onChangeFile"
:before-remove="beforeRemove"
:on-remove="onRemoveFile"
>
<a href="javascript:;" v-show="showUpFile">
<i class="el-icon-upload"></i>
<p>点击上传</p>
</a>
</el-upload>
</div>
</div>
</template>
<script>
export default {
name: '',
data () {
return {
fileList: [], // // 上传文件列表
upFile: [], // 文件File 上传参数
upFileList: [] // 文件File列表 上传参数
}
},
methods: {
// 选择上传文件
onChangeFile (file, fileList) {
const isLt25M = file.size / 1024 / 1024 < 25
if (!isLt25M) {
this.$msgbox.alert('上传文件大小不能超过 25MB!')
return false
}
this.upFileList = []
for (let x of fileList) {
if (x.raw) {
this.upFileList.push(x.raw)
}
}
},
// 移除文件之前
beforeRemove (file, fileList) {
return this.$msgbox.alert(`确定移除 ${file.name}？`)
},
// 移除文件
onRemoveFile (file, fileList) {
this.upFileList = []
for (let x of fileList) {
if (x.raw) {
this.upFileList.push(x.raw)
}
}
},
// 请求 上传产品文件 接口
myUploadFile () {
this.upFile = this.upFileList.shift()
let uploadForm = new FormData()
uploadForm.append('uid', this.$store.state.mutations.userId)
uploadForm.append('token', this.$store.state.mutations.userToken)
uploadForm.append('file', this.upFile)
this.$api.pProductFile(uploadForm).then(response => {
console.log(response)
if (this.upFileList.length === 0) {
this.upFile = ''
return false
} else {
this.myUploadFile()
}
}).catch(error => {
console.log(error.response)
this.$msgbox.alert(error.response.data.message, {
callback: action => {
if (error.response.data.message === 'token验证失败') {
this.$router.push({ path: '/login' })
}
}
})
})
}
}
}
</script>
<style scoped>
</style>
