Ant Design Pro图片上传

最新推荐文章于 2024-08-23 16:02:20 发布

拉布拉卡的小推车

最新推荐文章于 2024-08-23 16:02:20 发布

阅读量726

点赞数

分类专栏：前端文章标签： vue java

本文链接：https://blog.csdn.net/M625387195/article/details/119006226

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文档展示了如何使用AntDesignPro的Vue组件与SpringBoot后端进行交互，实现图片上传功能。前端通过A-Upload组件选择图片，上传到后端，后端接收到文件并保存在本地。在表单中，用户可以输入上传人信息，并通过A-Form和A-Input组件进行验证。最后，通过axios发送POST请求，设置超时时间和Content-Type，确保文件上传的顺利完成。

摘要由CSDN通过智能技术生成

之前我写了一篇利用springboot将图片保存在本地的代码，现在前端使用Ant Design Pro与后台交互
新建表单的vue

<template>
  <a-modal
    title="配置项"
    :width="640"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="上传文件"
          :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-item
          label="上传人"
          :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 } } = this
        const { fileList } = this
        const 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>