之前我写了一篇利用springboot将图片保存在本地的代码，现在前端使用Ant Design Pro与后台交互
新建表单的vue
<template><a-modaltitle="配置项":width="640":visible="visible":confirmLoading="confirmLoading"@ok="handleSubmit"@cancel="handleCancel"><a-spin :spinning="confirmLoading"><a-form :form="form"><a-form-itemlabel="上传文件":labelCol="labelCol":wrapperCol="wrapperCol"><a-upload:file-list="fileList":remove="handleRemove":before-upload="beforeUpload"><a-button> <a-icon type="upload"/> 选择图片或视频 </a-button></a-upload></a-form-item><a-form-itemlabel="上传人":labelCol="labelCol":wrapperCol="wrapperCol"><a-input v-decorator="['uploadUser', {rules: [{required: true}]}]"/></a-form-item></a-form></a-spin></a-modal></template><script>export default {data () {return {labelCol: {xs: {span: 24 },sm: {span: 7 }},wrapperCol: {xs: {span: 24 },sm: {span: 13 }},visible: false,confirmLoading: false,form: this.$form.createForm(this),fileList: []}},methods: {handleSubmit (file) {const {form: {validateFields } } = thisconst {fileList } = thisconst formData = new FormData()fileList.forEach(file => {formData.append('file', file)})validateFields((errors, values) => {formData.append('uploadUser', values.uploadUser)axios({url: '*/upload',method: 'post',data: formData,timeout: 9000000, //这个就是重点 因为上传时间过长，http请求时间过长，来不及回复。headers: {'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime()}}).then(res => {if (res.code === 200) {this.$message.success('图片上传成功')} else {this.$message.error('图片上传失败')}})})},handleCancel () {this.visible = false},handleRemove (file) {const index = this.fileList.indexOf(file)const newFileList = this.fileList.slice()newFileList.splice(index, 1)this.fileList = newFileList},beforeUpload (file) {this.fileList = [...this.fileList, file]return false}}}</script>
