首先需要给上传组件增加http-request属性,这个方法中可以获取到文件,并按照自己的方式进行上传。
<el-upload
ref='fileUpload'
action='#'
:http-request='httpRequest'
:on-preview="handlePreview"
:on-remove="handleRemove"
:limit="1"
:on-exceed="handleExceed"
:file-list="fileList"
:on-success='handleSuccess'
accept='.xls'
>
<el-button
size="small"
type="primary"
>上传文件</el-button>
<div slot="tip">支持扩展名:.xls</div>
</el-upload>
设置了http-request属性之后,在选取文件后马上就会调用该方法。如果不想要马上上传的话,只需要增加:auto-upload=‘false’,然后在需要上传时,调用实例的submit方法即可执行httpRequest方法
methods:{
upload(){
this.$refs.fileUpload.submit()
}
}
如果是单纯的上传文件,但需要携带参数的话,只需要增加属性即可,例如:
<el-upload
ref='fileUpload'
:data="{productId:123}"
action='#'
:http-request='httpRequest'
:on-preview="handlePreview"
:on-remove="handleRemove"
:limit="1"
:on-exceed="handleExceed"
:file-list="fileList"
:on-success='handleSuccess'
accept='.xls'
>
<el-button
size="small"
type="primary"
>上传文件</el-button>
<div slot="tip">支持扩展名:.xls</div>
</el-upload>
但是如果是在表单中上传文件,且是直接和其他表单项数据一起上传的话,则需要手动进行上传。(不做表单校验则不需要手动进行数据传输,直接使用data属性包含额外参数即可)
如果需要做表单校验,则httpRequest只是为了获取到文件,首先不要设置auto-upload,选择文件后马上就调用httpRequest方法,在httpRequest方法中获取到文件并储存,方便后面做表单校验。
httpRequest(params) {
this.form.file = params.file
},
在最终提交时,需要使用formData对象,包裹数据传输
this.$refs.form.validate((valid) => {
if (valid) {
const data = {
file: this.form.file,
secret: this.form.key
}
let form = new FormData()
for (let i in data) {
form.append(i, data[i])
}
uploadFn(form).then((res) => {
this.$message('上传成功')
})
}
})
记得在请求时,增加请求头:
headers: {
'Content-Type': 'multipart/form-data'
}
然后你就会看到
完事!