vxe-table 使用 vxe-upload 在表格中实现非常强大的粘贴上传图片和附件功能
作者：可不简单
本文通过实例代码介绍了vxe-table渲染器的强大功能,配合 vxe-upload 上传,比如复制或者截图一张图片,通过粘贴方式快速粘贴到单元格中,能支持单张、多张、查看、预览功能,感兴趣的朋友跟随小编一起看看吧
看看 vxe-table 渲染器强大到什么地步；在开发需求中，经常会在表格列表中放入图片展示，例如头像、视频图片，附件列表等，但需要对表格批量操作是，会比较繁琐，那么有没有方便操作一点的放呢，肯定是有的；
配合 vxe-upload 上传；比如复制或者截图一张图片，通过粘贴方式快速粘贴到单元格中，能支持单张、多张、查看、预览。上传精进度等。
渲染 vxe-upload，实现粘贴、拖拽上传
<template>
<div>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
const fileList2CellRender = {
name: 'VxeUpload',
props: {
multiple: true,
showButtonText: false,
pasteToUpload: true,
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 imgList2CellRender = {
name: 'VxeUpload',
props: {
mode: 'image',
multiple: true,
showButtonText: false,
pasteToUpload: true,
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,
columnConfig: {
resizable: true
},
columns: [
{ type: 'seq', width: 70 },
{ field: 'name', title: 'Name', minWidth: 180 },
{ field: 'fileList2', title: '上传附件', width: 300, cellRender: fileList2CellRender },
{ field: 'imgList2', title: '上传图片', width: 210, cellRender: imgList2CellRender }
],
data: [
{ id: 10001, name: 'Test1', imgList2: [], fileList2: [{ name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }] },
{ id: 10002, name: 'Test2', imgList2: [{ name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }, { name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' }], fileList2: [] },
{ id: 10003, name: 'Test3', imgList2: [{ name: 'fj577.jpg', url: 'https://vxeui.com/resource/img/fj577.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,
fileList2CellRender,
imgList2CellRender
}
}
}
</script>查看 Gitee https://gitee.com/x-extends/vxe-table
到此这篇关于vxe-table 使用 vxe-upload 在表格中实现非常强大的粘贴上传图片和附件的文章就介绍到这了,更多相关vxe-table粘贴上传图片和附件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！