前言
ElementUI组件中的upload, 已经帮我们实现了上传方法，但是有时候我们需要去手动上传.
在组件当中, 确实提供了一个方法submit来进行手动的上传工作. 但是使用下来发现了一个问题
- 当表单没有选择上传的文件时,
submit 方法不会触发
这样的话就出现了一个问题, 假如我们需要新建用户, 并需要同时给用户上传头像, 那我就算不上传头像的话也应该去把数据提交到action配置的链接, 但是使用组件的时候却没有.
解决
组件写法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <el-upload
ref="upload"
:action="postUrl"
:before-remove="beforeRemove"
:data="hostDetail"
:limit="1"
:on-exceed="handleExceed"
:file-list="fileList"
:auto-upload="false"
with-credentials
:headers="requestHeaders"
:http-request="uploadFiles"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传文件，且不超过500kb</div>
</el-upload>
|
在这里我们创建了一个变量this.signal来判断, 初始化的时候默认为false, 如果在提交submit之后还是false,就说明表单内没有文件, 如果为true，则说明有。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| addHostSubmit() {
this.$refs['upload'].submit()
if (this.signal) {
createHost(this.postData, true).then(() => {
this.$message.success('创建成功')
})
this.signal = false
} else {
createHost(this.hostDetail).then(() => {
this.$message.success('创建成功')
})
}
this.dialogVisible = false
}
|
覆盖默认的上传的方法
我们新建了FormData(), 并将表单数据也跟着添加, 随后赋值为this.postData
1
2
3
4
5
6
7
8
9
10
| uploadFiles(params) {
const data = new FormData()
data.append('file', params.file)
for (const i in params.data) {
data.append(i, params.data[i])
}
this.postData = data
this.signal = true
}
|
axios上传部分
anios上传文件的时候, 需要设置一下headers, 所以需要添加一下.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| export function createHost(data, header) {
if (header) {
return request({
url: `/api/hosts/`,
method: 'post',
data,
headers: {
'Content-Type': 'multipart/form-data'
}
})
} else {
return request({
url: `/api/hosts/`,
method: 'post',
data
})
}
}
|
参考文档
