Ant Design Pro图片上传

之前我写了一篇利用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>

Ant Design Pro图片上传相关推荐

React Ant Design UI 图片上传组件代码片段
用户可以上传图片并在列表中显示缩略图.当上传照片数到达限制后,上传按钮消失. import { Upload, Icon, Modal } from 'antd';class PicturesWall ...
React开发（267）:ant design upload简单上传
## 如果只是简单的上传,没必要写 customRequest ```javascript<Uploadname="file"action={`${BASE_URL}/com ...
ant design Upload组件上传文件类型
Upload组件上传文件类型设置 1.设置上传文件类型为excel <template><a-uploadname="file":multiple="t ...
ANT DESIGN VUE upload 上传excel （使用upliad组件，上传excel到页面表格）
<a-uploadname="file" //发到后台的文件参数名:multiple="false" //禁用多选:file-list="fil ...
Ant Design Vue 文件上传自定义按钮和文件列表位置
采用默认上传文件样式如下: 主要代码如下,可参照官方示例 <a-uploadname="file"style="float: left;"@change= ...
Vue+Ant Design of Vue上传文件，并限制上传文件数及限制其类型
upload创建,accept选择上传的类型,file-list上传的数据,remove点击移除文件时的回调,before-upload上传文件之前的钩子,参数为上传的文件,若返回 false 则停止 ...
Ant Design Upload 自定义上传 customRequest
本文章重点描述上传组件 Upload 的 customRequest 自定义文件上传逻辑的实现目录 Upload 常用属性和方法默认上传 customRequest 自定义上传 Upload 自定 ...
ant design pro 上传excel示例
ant design pro 上传excel示例前言 TS java model 前端展示前言大家好! 最近在学习使用ant design pro ,本人是java后端,没有专业的学习过reac ...
前端初学者的Ant Design Pro V6总结（上）
前端初学者的Ant Design Pro V6总结(上) 一.UI组件开发流程 () => {} 通用(异步)函数 useEmotionCss 定义CSS useModel获取全局状态 useC ...
ant design pro 修改logo图片名称位置
修改网页title的图片在:public/icons目录下更换 Ant Design Pro 的 logo 和名称: 位置:/public/favicon.png 只须将制作好的公司logo或者图片 ...

Ant Design Pro图片上传

Ant Design Pro图片上传相关推荐

最新文章

热门文章