vue vxe-table vxe-form 表格表单中使用上传组件，上传附件、上传图片详细教程

于 2024-10-21 11:10:59 发布
阅读量1.5k 收藏 18
点赞数 17
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenhdowue/article/details/143105145
版权

官网文档：https://vxeui.com/

分享项目中上传组件上传进度的用法，已经表单和表格中使用上传组件，以及如何全局封装上传组件，简化代码，可以复用配置化。
上传组件使用 vxe-upload，只需要配置好参数 upload-method 就可以自动上传，接收一个对， 包含 url、name、size 等属性。

上传附件基本用法

在这里插入图片描述

<template>
  <div>
    <vxe-upload v-model="fileList" multiple :upload-method="uploadMethod"></vxe-upload>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    const fileList = []
    const uploadMethod = ({ file }) => {
      const formData = new FormData()
      formData.append('file', file)
      return axios.post('/api/pub/upload/single', formData).then((res) => {
        // { url: '' }
        return {
          ...res.data
        }
      })
    }
    return {
      fileList,
      uploadMethod
    }
  }
}
</script>

上传图片基本用法

在这里插入图片描述

<template>
  <div>
    <vxe-upload v-model="imgList" mode="image" multiple :upload-method="uploadMethod"></vxe-upload>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    const imgList = []
    const uploadMethod = ({ file, updateProgress }) => {
      const formData = new FormData()
      formData.append('file', file)
      return axios.post('/api/pub/upload/single', formData).then((res) => {
        // { url: '' }
        return {
          ...res.data
        }
      })
    }
    return {
      imgList,
      uploadMethod
    }
  }
}
</script>

表单中使用

在这里插入图片描述

<template>
  <div>
    <vxe-form v-bind="formOptions"></vxe-form>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    const fileList1ItemRender = {
      name: 'VxeUpload',
      props: {
        uploadMethod ({ file }) {
          const formData = new FormData()
          formData.append('file', file)
          return axios.post('/api/pub/upload/single', formData).then((res) => {
            // { url: ''}
            return {
              ...res.data
            }
          })
        }
      }
    }
    const fileList2ItemRender = {
      name: 'VxeUpload',
      props: {
        multiple: true,
        uploadMethod ({ file }) {
          const formData = new FormData()
          formData.append('file', file)
          return axios.post('/api/pub/upload/single', formData).then((res) => {
            // { url: ''}
            return {
              ...res.data
            }
          })
        }
      }
    }
    const imgList1ItemRender = {
      name: 'VxeUpload',
      props: {
        mode: 'image',
        uploadMethod ({ file }) {
          const formData = new FormData()
          formData.append('file', file)
          return axios.post('/api/pub/upload/single', formData).then((res) => {
            // { url: ''}
            return {
              ...res.data
            }
          })
        }
      }
    }
    const imgList2ItemRender = {
      name: 'VxeUpload',
      props: {
        mode: 'image',
        multiple: true,
        uploadMethod ({ file }) {
          const formData = new FormData()
          formData.append('file', file)
          return axios.post('/api/pub/upload/single', formData).then((res) => {
            // { url: ''}
            return {
              ...res.data
            }
          })
        }
      }
    }
    const actionItemRender = {
      name: 'VxeButtonGroup',
      options: [
        { content: '重置', type: 'reset' },
        { content: '提交', type: 'submit', status: 'primary' }
      ]
    }
    const formOptions = {
      titleWidth: 120,
      data: {
        name: 'test1',
        nickname: 'Testing',
        sex: '',
        fileList1: [],
        fileList2: [
          { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }
        ],
        imgList1: [],
        imgList2: [
          { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }
        ]
      },
      items: [
        { field: 'name', title: '名称', span: 24, itemRender: { name: 'VxeInput' } },
        { field: 'fileList1', title: '上传附件', span: 24, itemRender: fileList1ItemRender },
        { field: 'fileList2', title: '上传附件多选', span: 24, itemRender: fileList2ItemRender },
        { field: 'imgList1', title: '上传图片', span: 24, itemRender: imgList1ItemRender },
        { field: 'imgList2', title: '上传图片多选', span: 24, itemRender: imgList2ItemRender },
        { align: 'center', span: 24, itemRender: actionItemRender }
      ]
    }
    return {
      formOptions,
      fileList1ItemRender,
      fileList2ItemRender,
      imgList1ItemRender,
      imgList2ItemRender
    }
  }
}
</script>

表格中使用

在这里插入图片描述

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    const fileList1CellRender = {
      name: 'VxeUpload',
      props: {
        readonly: true,
        progressText: '{percent}%',
        moreConfig: {
          maxCount: 1,
          layout: 'horizontal'
        },
        uploadMethod ({ file }) {
          const formData = new FormData()
          formData.append('file', file)
          return axios.post('/api/pub/upload/single', formData).then((res) => {
            // { url: ''}
            return {
              ...res.data
            }
          })
        }
      }
    }
    const fileList2CellRender = {
      name: 'VxeUpload',
      props: {
        multiple: true,
        showButtonText: false,
        progressText: '{percent}%',
        moreConfig: {
          maxCount: 1,
          layout: 'horizontal'
        },
        uploadMethod ({ file }) {
          const formData = new FormData()
          formData.append('file', file)
          return axios.post('/api/pub/upload/single', formData).then((res) => {
            // { url: ''}
            return {
              ...res.data
            }
          })
        }
      }
    }
    const imgList1CellRender = {
      name: 'VxeUpload',
      props: {
        mode: 'image',
        readonly: true,
        progressText: '{percent}%',
        moreConfig: {
          maxCount: 1
        },
        imageStyle: {
          width: 40,
          height: 40
        },
        uploadMethod ({ file }) {
          const formData = new FormData()
          formData.append('file', file)
          return axios.post('/api/pub/upload/single', formData).then((res) => {
            // { url: ''}
            return {
              ...res.data
            }
          })
        }
      }
    }
    const imgList2CellRender = {
      name: 'VxeUpload',
      props: {
        mode: 'image',
        multiple: true,
        showButtonText: false,
        progressText: '{percent}%',
        moreConfig: {
          maxCount: 1
        },
        imageStyle: {
          width: 40,
          height: 40
        },
        uploadMethod ({ file }) {
          const formData = new FormData()
          formData.append('file', file)
          return axios.post('/api/pub/upload/single', formData).then((res) => {
            // { url: ''}
            return {
              ...res.data
            }
          })
        }
      }
    }
    const gridOptions = {
      border: true,
      showOverflow: true,
      columns: [
        { type: 'seq', width: 70 },
        { field: 'name', title: 'Name', minWidth: 180 },
        { field: 'fileList1', title: '附件列表', width: 240, cellRender: fileList1CellRender },
        { field: 'fileList2', title: '上传附件', width: 300, cellRender: fileList2CellRender },
        { field: 'imgList1', title: '图片列表', width: 160, cellRender: imgList1CellRender },
        { field: 'imgList2', title: '上传图片', width: 210, cellRender: imgList2CellRender }
      ],
      data: [
        {
          id: 10001,
          name: 'Test1',
          imgList1: [],
          imgList2: [],
          fileList1: [
            { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }
          ],
          fileList2: [
            { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }
          ]
        },
        {
          id: 10002,
          name: 'Test2',
          imgList1: [
            { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' },
            { name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' }
          ],
          imgList2: [
            { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' },
            { name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' }
          ],
          fileList1: [],
          fileList2: []
        },
        {
          id: 10003,
          name: 'Test3',
          imgList1: [
            { name: 'fj577.jpg', url: 'https://vxeui.com/resource/img/fj577.jpg' }
          ],
          imgList2: [
            { name: 'fj577.jpg', url: 'https://vxeui.com/resource/img/fj577.jpg' }
          ],
          fileList1: [
            { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' },
            { name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' },
            { name: 'fj187.jpg', url: 'https://vxeui.com/resource/img/fj187.jpg' }
          ],
          fileList2: [
            { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' },
            { name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' },
            { name: 'fj187.jpg', url: 'https://vxeui.com/resource/img/fj187.jpg' }
          ]
        }
      ]
    }
    return {
      gridOptions,
      fileList1CellRender,
      fileList2CellRender,
      imgList1CellRender,
      imgList2CellRender
    }
  }
}
</script>

全局封装，统一接口，配置化，高复用性

以上的使用有没有发现一个问题，就是上传组件都要写上传接口，那么有没有办法统一在一个地方写上传接口呢，答案是有的，非常简单，有几种方法：

  • 第一种：将 vxe-upload 封装成自己的业务组件，直接使用业务组件就可以了。
  • 第二种：使用全局默认参数配置上传、删除、下载的等接口**（推荐，最简单且最好用的方式）**
  • 第三种：使用渲染器定义一个控件，将复用逻辑封装里面

接下来说的就是全局默认参数的用法：

import { VxeUI } from 'vxe-pc-ui'
import axios from 'axios'

VxeUI.setConfig({
	upload: {
		uploadMethod ({ file }) {
	      const formData = new FormData()
	      formData.append('file', file)
	      return axios.post('/api/pub/upload/single', formData).then((res) => {
	        // { url: ''}
	        return {
	          ...res.data
	        }
	      })
	    }
	}
})

表格使用

在这里插入图片描述

<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    const fileList1CellRender = {
      name: 'VxeUpload',
      props: {
        readonly: true,
        progressText: '{percent}%',
        moreConfig: {
          maxCount: 1,
          layout: 'horizontal'
        }
      }
    }
    const fileList2CellRender = {
      name: 'VxeUpload',
      props: {
        multiple: true,
        showButtonText: false,
        progressText: '{percent}%',
        moreConfig: {
          maxCount: 1,
          layout: 'horizontal'
        }
      }
    }
    const imgList1CellRender = {
      name: 'VxeUpload',
      props: {
        mode: 'image',
        readonly: true,
        progressText: '{percent}%',
        moreConfig: {
          maxCount: 1
        },
        imageStyle: {
          width: 40,
          height: 40
        }
      }
    }
    const imgList2CellRender = {
      name: 'VxeUpload',
      props: {
        mode: 'image',
        multiple: true,
        showButtonText: false,
        progressText: '{percent}%',
        moreConfig: {
          maxCount: 1
        },
        imageStyle: {
          width: 40,
          height: 40
        }
      }
    }
    const gridOptions = {
      border: true,
      showOverflow: true,
      columns: [
        { type: 'seq', width: 70 },
        { field: 'name', title: 'Name', minWidth: 180 },
        { field: 'fileList1', title: '附件列表', width: 240, cellRender: fileList1CellRender },
        { field: 'fileList2', title: '上传附件', width: 300, cellRender: fileList2CellRender },
        { field: 'imgList1', title: '图片列表', width: 160, cellRender: imgList1CellRender },
        { field: 'imgList2', title: '上传图片', width: 210, cellRender: imgList2CellRender }
      ],
      data: [
        {
          id: 10001,
          name: 'Test1',
          imgList1: [],
          imgList2: [],
          fileList1: [
            { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }
          ],
          fileList2: [
            { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }
          ]
        },
        {
          id: 10002,
          name: 'Test2',
          imgList1: [
            { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' },
            { name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' }
          ],
          imgList2: [
            { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' },
            { name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' }
          ],
          fileList1: [],
          fileList2: []
        },
        {
          id: 10003,
          name: 'Test3',
          imgList1: [
            { name: 'fj577.jpg', url: 'https://vxeui.com/resource/img/fj577.jpg' }
          ],
          imgList2: [
            { name: 'fj577.jpg', url: 'https://vxeui.com/resource/img/fj577.jpg' }
          ],
          fileList1: [
            { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' },
            { name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' },
            { name: 'fj187.jpg', url: 'https://vxeui.com/resource/img/fj187.jpg' }
          ],
          fileList2: [
            { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' },
            { name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' },
            { name: 'fj187.jpg', url: 'https://vxeui.com/resource/img/fj187.jpg' }
          ]
        }
      ]
    }
    return {
      gridOptions,
      fileList1CellRender,
      fileList2CellRender,
      imgList1CellRender,
      imgList2CellRender
    }
  }
}
</script>

表单使用

在这里插入图片描述

<template>
  <div>
    <vxe-form v-bind="formOptions"></vxe-form>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    const fileList1ItemRender = {
      name: 'VxeUpload'
    }
    const fileList2ItemRender = {
      name: 'VxeUpload',
      props: {
        multiple: true
      }
    }
    const imgList1ItemRender = {
      name: 'VxeUpload',
      props: {
        mode: 'image'
      }
    }
    const imgList2ItemRender = {
      name: 'VxeUpload',
      props: {
        mode: 'image',
        multiple: true
      }
    }
    const actionItemRender = {
      name: 'VxeButtonGroup',
      options: [
        { content: '重置', type: 'reset' },
        { content: '提交', type: 'submit', status: 'primary' }
      ]
    }
    const formOptions = {
      titleWidth: 120,
      data: {
        name: 'test1',
        nickname: 'Testing',
        sex: '',
        fileList1: [],
        fileList2: [
          { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }
        ],
        imgList1: [],
        imgList2: [
          { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }
        ]
      },
      items: [
        { field: 'name', title: '名称', span: 24, itemRender: { name: 'VxeInput' } },
        { field: 'fileList1', title: '上传附件', span: 24, itemRender: fileList1ItemRender },
        { field: 'fileList2', title: '上传附件多选', span: 24, itemRender: fileList2ItemRender },
        { field: 'imgList1', title: '上传图片', span: 24, itemRender: imgList1ItemRender },
        { field: 'imgList2', title: '上传图片多选', span: 24, itemRender: imgList2ItemRender },
        { align: 'center', span: 24, itemRender: actionItemRender }
      ]
    }
    return {
      formOptions,
      fileList1ItemRender,
      fileList2ItemRender,
      imgList1ItemRender,
      imgList2ItemRender
    }
  }
}
</script>

现在是不发现上传件方式统一了，上传接口统一了，代码复用了，配置简单了，没有最强，只有更强！！！

github https://github.com/x-extends/vxe-pc-ui
gitee https://gitee.com/x-extends/vxe-pc-ui

chenhdowue
关注
【JEECG】JVxeTable表格拖拽排序功能
乌昂王
04-14 1945
【JEECG】JVxeTable表格拖拽排序功能， 实现JVxeTable表格拖拽排序功能， 解决子表拖拽排序后，点击保存数据，未实现拖拽排序后效果
vxe-table 使用过程中的bug，实时更新（置顶）
IT博客技术分享
05-17 9912
1. 由于vxeTable 使用了font-awesome字体图标， 但是官方文档没有详细告诉你怎么引入使用，所以很多小伙伴都找不到原因。 解决办法：第一步安装依赖 npm install font-awesome --save 第二步引入依赖样式文件 在main.js文件中引入 //引入font-awesome import 'font-awesome/css/font-awesome.css'; 使用： <vxe-button size="mini" status="su..
Vuejs的文件上传组件
08-11
Vue.js的文件上传组件
使用vue构建一个上传图片表单
12-03
这篇博客也不知道起个什么名字比较好，毕竟刚开始学习vue，很多还不是很熟悉，一直在慢慢摸索中；之前也习惯了用jQuery写js代码，思维逻辑也要有个转换的过程。 1. 转变思维 使用vue编写代码，首先要做的就是转换思维，vue是一个数据驱动的框架，我们只需要操作数据，数据变化后，vue会自动改变DOM结构，而jQuery是直接操作DOM的。比如刚开始写的代码中犯的错误，有一个页面中的input标签是并列多个的，而且name属性的值是自增的，那么我就用v-for循环下，把index填充进去就行了，删除的时候根据index再进行删除。于是代码是这样的： html: <div id="app"
Vxe UI vue vxe-table 如何在表格中使用上传附件、上传图片
最新发布
我的博客
08-30 1061
vue如何在表格中使用上传附件、上传图片。
vue上传图片
weixin_62328829的博客
10-14 6443
vue后台管理项目经常会遇到表单中上传图片的需求，我们运用element中的upload就可以实现这个功能，效果如下。在使用upload之前建议大家去读一边upload的文档，知道每个属性都是干什么的，到这里就完成了图片上传的操作了。先看下后端给的接口文档。
VUE表单文件上传
记忆商店
07-11 777
1.通过element-ui中的el-upload组件，调用后台接口上传文件，返回文件名和存储地址。2.监听fileList变化，有变动时，更新表单中文件名称和文件url属性值。2.表单提交时，校验fileList是否为空。参数定义 ：文件大小、类型、个数、上传地址等。监听fileList的变动，给表单属性赋值。1.表单重置清空时，将fileList清空；在表单中实现文件上传功能。el-upload组件。
vxe-table前端上传数据
diversity的专栏
04-03 982
（注：附件中的字段名必须和表格一致，数据格式不正确将无法导入；前端导入的数据量有限，建议使用后端导入）由于数据量不大，而且需要用户对数据能交互，将批量上传做成前端导入，并在前端做各种校验。函数可以直接将数据导入表格中。如果是服务端导出，通过设置。开启服务端自定义导入。
vxe-table::dolphin: vxe-table vue 表格解决方案
05-11
一个基于的PC端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等... 设计理念 面向现代...
vxe-table vue表格解决方案-其他
06-11
vxe-table是一个基于vue的表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念： 面向...
vxe-table：功能强大的Vue表格解决方案介绍
资源摘要信息:"vxe-table是基于Vue.js的PC端表格组件，其设计理念主要面向现代浏览器，以提供高效的简洁API设计和模块化特性。它支持按需加载以及扩展接口，旨在打造一个灵活、功能强大的表格解决方案，同时保证性能...
Vue实现附件上传功能
10-15
主要为大家详细介绍了Vue实现附件上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue+elementUI实现表单和图片上传及验证功能示例
12-28
本文实例讲述了vue+elementUI实现表单和图片上传及验证功能。分享给大家供大家参考，具体如下： 最终实现需求如下图： form表单内容与重点人员图片同时上传且图片为必填项 分析弹框页需要解决的问题有： 1、表单内容的验证及必填项 2、新增和编辑用同一个组件如何处理数据 3、图片需要和信息一起传递（即不允许自动上传） 4、图片必填的验证问题 针对上述问题作出方案： 1、el-form的表单验证需要注意几个地方： a：el-form-item的prop值需要和表单标签的v-model值保持一致 例如： <e
vue form表单图片上传
路虽远行则将至，事虽难做则必成。
02-27 1451
在实际开发中经常需要在from表单上传图片，比如考试封面，文件封面。等等在element-ui 有现成的，但是他需要上传到地址，晚上查阅的也有现成的，太重了。我们的需求就是上传一个图片预览，获取到base路径，双向绑定到form表单，传给后端保存。我们可以通过2个盒子+input的file类型+自定义点击事件dispatchEvent就可以实现了。
vue含附件的表单提交
qq_26905813的博客
05-04 4075
此帖的主要目的是记录以下两点： 1、使用elementUI的上传附件。 2、vue使用FormData，向接口传送表单数据（含附件）。 3、接口从HttpServletRequest中获取请求数据，通过@RequestPart(“USER_PHOTO_”) MultipartFile USER_PHOTO_获取附件数据。 …1、使用elementUI的上传附件… <el-upload action="uploadAction" list-type
vue上传含图片的表单
ljy764589的博客
05-20 1040
vue 中当提交表单时里面需要上传照片时，需要使用到formData将对象转换成表单数据 <el-upload class="upload-demo" ref="upload" action accept=".jpg .png" :on-change="handleChange" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false"> <el-button slot="t
在vue中上传图片
明思齐的博客
05-17 4845
🌸。
Vue，在表单中使用el-upload手动上传图片
shsyzhzhgn的博客
10-17 2502
vue，在表单中使用el-upload手动上传图片，组件选择的是照片墙
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值