首先需要给上传组件增加http-request属性,这个方法中可以获取到文件,并按照自己的方式进行上传。
<el-uploadref='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-buttonsize="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-uploadref='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-buttonsize="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'}
然后你就会看到
完事!