使用computed上传时携带参数
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="手机">
<el-input v-model="form.phone"></el-input>
</el-form-item>
<el-form-item label="上传文件">
<el-upload
ref="upload"
action=""
:on-change="handleChange"
:file-list="fileList"
:auto-upload="false"
:data="fileDa"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit()">提交</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
export default {
data() {
return {
form: {
name: '',
phone: ''
},
fileList: []
}
},
computed: {
fileDa() {
return {
...this.form
}
}
},
methods: {
handleChange(file, fileList) {
this.fileList = fileList
},
onSubmit() {
this.$refs.upload.submit()
}
}
}
</script>
使用http-request自定义上传方法
<el-upload
action=" "
:http-request="httpRequest"
ref="upload">
<el-button type="primary" size="small">上传</el-button>
</el-upload>
export default {
data() {
return { }
},
methods: {
httpRequest(param) {
const formData = new FormData()
formData.append('file', param.file)
const data = {}
formData.append('data', data)
Api.upload(formData).then(response => {
console.log(response)
})
}
}
}
</script>