各位老铁们，大家好，今天由我来为大家分享数据提交网站源码分享，以及数据禾网站的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！
1、功能介绍
商品里面包含列表展示的缩略图和轮播图需要上传，其中轮播图是多张，图片存储可以存放在本地，也可以存放在阿里云。
2、操作路径
添加图片分组
批量上传
3、素材数据表
素材组
CREATETABLE`yx_material_group`(\n`id`varchar(32)COLLATEutf8mb4_binNOTNULLCOMMENT&39;,\n`create_time`datetimeNOTNULLDEFAULTCURRENT_TIMESTAMPCOMMENT&39;,\n`create_id`varchar(32)CHARACTERSETutf8DEFAULTNULLCOMMENT&39;,\n`name`varchar(200)COLLATEutf8mb4_binNOTNULLCOMMENT&39;,\n`update_time`datetimeDEFAULTNULL,\n`is_del`tinyint(1)DEFAULT&39;,\nPRIMARYKEY(`id`)USINGBTREE\n)ENGINE=InnoDBDEFAULTCHARSET=utf8mb4COLLATE=utf8mb4_binROW_FORMAT=DYNAMICCOMMENT=&39;;
图片素材
CREATETABLE`yx_material`(\n`id`varchar(32)COLLATEutf8mb4_binNOTNULLCOMMENT&39;,\n`create_time`datetimeNOTNULLDEFAULTCURRENT_TIMESTAMPCOMMENT&39;,\n`create_id`varchar(100)CHARACTERSETutf8DEFAULTNULLCOMMENT&39;,\n`type`char(2)COLLATEutf8mb4_binNOTNULLCOMMENT&39;,\n`group_id`varchar(32)COLLATEutf8mb4_binDEFAULTNULLCOMMENT&39;,\n`name`varchar(200)COLLATEutf8mb4_binNOTNULLCOMMENT&39;,\n`url`varchar(500)COLLATEutf8mb4_binDEFAULT&39;COMMENT&39;,\n`update_time`datetimeDEFAULTNULL,\n`is_del`tinyint(1)DEFAULT&39;,\nPRIMARYKEY(`id`)USINGBTREE\n)ENGINE=InnoDBDEFAULTCHARSET=utf8mb4COLLATE=utf8mb4_binROW_FORMAT=DYNAMICCOMMENT=&39;;
yx_material_group和yx_material是一对多的关系，
如上述第6行代码，yx_material的group_id关联yx_material_group的id字段
4、前端代码
<el-col:span=&34;>\n<el-form-itemlabel=&34;prop=&34;>\n<single-picv-model=&34;type=&34;:num=&34;:width=&34;:height=&34;/>\n</el-form-item>\n</el-col>\n<el-col:span=&34;>\n<el-form-itemlabel=&34;prop=&34;>\n<MaterialListv-model=&34;type=&34;:num=&34;:width=&34;:height=&34;/>\n</el-form-item>\n</el-col>\n\nimportMaterialListfrom&39;\nimportsinglePicfrom&39;
如上述第3，13行代码，引入了单个图片上的组件
如上述第8，12行代码，引入了多个图片上的组件
点击添加图片，弹出素材图片选择框，如下图是右侧分组列表代码
<ulv-for=&34;:key=&34;class=&34;>\n<litabindex=&34;class=&34;:style=&39;width:&39;px;height:&39;px&34;>\n<div>\n<img:src=&34;alt=&34;class=&34;>\n<spanclass=&34;>\n<spanv-if=&34;class=&34;@click=&39;up&34;>\n<iclass=&34;/>\n</span>\n<spanclass=&34;@click=&34;>\n<iclass=&34;/>\n</span>\n<spanclass=&34;@click=&34;>\n<iclass=&34;/>\n</span>\n<spanv-if=&34;class=&34;@click=&39;down&34;>\n<iclass=&34;/>\n</span>\n</span>\n</div>\n</li>\n</ul>
如上述第1行代码，使用ul来做列表，其中分组数据是value
<el-colv-for=&34;:key=&34;:span=&34;>\n<el-card:body-style=&39;5px&34;>\n<el-image\nstyle=&34;\n:src=&34;\nfit=&34;\n:preview-src-list=&34;\n:z-index=&34;\n/>\n<div>\n<el-checkboxclass=&34;:label=&34;>\n选择\n</el-checkbox>\n<el-row>\n<el-col:span=&34;class=&34;>\n<el-buttontype=&34;size=&34;@click=&34;>删除</el-button>\n</el-col>\n</el-row>\n\n</div>\n</el-card>\n</el-col>
如上述代码是图片展示代码，效果如上
如上述第一行代码，循环数组tableData，获取图片数据
5、java后台接口，
分组列表查询接口
如上图，可以通过搜索url对关键字来搜索到api到control接口
@GetMapping(value=&34;)\n@Log(&34;)\n@ApiOperation(&34;)\npublicResponseEntity<Object>getYxMaterialGroupsList(YxMaterialGroupQueryCriteriacriteria){\nreturnnewResponseEntity<>(yxMaterialGroupService.queryAll(criteria),HttpStatus.OK);\n}\n
如上述第5行代码，执行查询分组sql
@GetMapping(value=&34;)\n@Log(&34;)\n@ApiOperation(&34;)\npublicResponseEntity<Object>getYxMaterials(YxMaterialQueryCriteriacriteria,Pageablepageable){\nreturnnewResponseEntity<>(yxMaterialService.queryAll(criteria,pageable),HttpStatus.OK);\n}
如上述代码，查询图片份页数据并返回
6、前端批量上传代码
<el-col:span=&34;style=&34;>\n<el-upload\n:action=&34;\n:headers=&34;\n:file-list=&34;\n:on-progress=&34;\n:before-upload=&34;\n:on-success=&34;\n:data=&34;\nmultiple\n>\n<el-buttonsize=&34;type=&34;>批量上传</el-button>\n</el-upload>\n</el-col>\nheaders:{\nAuthorization:getToken()\n},
如上第3行代码，上传url是uploadApi:baseUrl+&39;,
如上述第4行代码，上传头，因为后台有token认证，所有需要获取token并设置在Authorization字段里面，如上15行代码
如上述第7行代码，上传图片前进行事件处理，代码如下
如上述第8行代码，上传图片后进行事件处理，代码如下
beforeUpload(file){\nconstisPic=\nfile.type===&39;||\nfile.type===&39;||\nfile.type===&39;||\nfile.type===&39;\nconstisLt2M=file.size/1024/1024<2\nif(!isPic){\nthis.$message.error(&39;)\nreturnfalse\n}\nif(!isLt2M){\nthis.$message.error(&39;)\n}\nreturnisPic&&isLt2M\n},\n
handleSuccess(response,file,fileList){\nconstthat=this\nthis.uploadProgress=0\naddObj({\ntype:&39;,\ngroupId:this.groupId!=&39;?this.groupId:null,\nname:file.name,\nurl:response.link\n}).then(()=>{\nthis.resultNumber++\nif(fileList.length===this.resultNumber){\nthat.getPage(that.page)\nthis.resultNumber=0\n}\n})\n},
如上述代码，上传图片成功后，添加到素材组和素材里面。
7后台java存储文件代码
代码路径
@ApiOperation(&34;)\n@PostMapping\npublicResponseEntity<Object>create(@RequestParam(defaultValue=&34;)Stringname,\n@RequestParam(defaultValue=&34;)Stringtype,\n@RequestParam(&34;)MultipartFile[]files){\n\nStringlocalUrl=redisUtils.getY(ShopConstants.ADMIN_API_URL);\nif(StrUtil.isBlank(type)){\nlocalUrl=redisUtils.getY(SystemConfigConstants.API_URL)+&34;;\n}\nStringmode=redisUtils.getY(SystemConfigConstants.FILE_STORE_MODE);\nStringBuilderurl=newStringBuilder();\nif(ShopCommonEnum.STORE_MODE_1.getValue().toString().equals(mode)){//存在走本地\nif(StrUtil.isBlank(localUrl)){\nthrownewYshopException(&34;);\n}\nfor(MultipartFilefile:files){\nLocalStorageDtolocalStorageDTO=localStorageService.create(name,file);\nif(&34;.equals(url.toString())){\nurl=url.append(localUrl+&34;+localStorageDTO.getType()+&34;+localStorageDTO.getRealName());\n}else{\nurl=url.append(&34;+localUrl+&34;+localStorageDTO.getType()+&34;+localStorageDTO.getRealName());\n}\n}\n}else{\n//走oss存储\nfor(MultipartFilefile:files){\nString[]originalFilename=file.getOriginalFilename().split(&34;);\nStringfileName=ossProperties.getBucketName()+&34;+originalFilename[0]+&34;+IdUtil.simpleUUID()+StrUtil.DOT+FileUtil.extName(file.getOriginalFilename());\ntry{\nossTemplate.putObject(ossProperties.getBucketName(),fileName,file.getInputStream());\n}catch(Exceptione){\ne.printStackTrace();\n}\nStringfileUrl=String.format(ossProperties.getCustomDomain(),fileName);\nif(&34;.equals(url.toString())){\nurl=url.append(fileUrl);\n}else{\nurl=url.append(&34;+fileUrl);\n}\n}\n}\n\nMap<String,Object>map=newHashMap<>(2);\nmap.put(&34;,0);\nmap.put(&34;,url);\nreturnnewResponseEntity(map,HttpStatus.CREATED);\n}
计划
1、ruoyi-flowable-plus工作流拆解
2、ruoyi-flowable-plus如何快速开发
3、电商项目源代码拆解
4、JEECG低代码开发平台
请关注我，本星球会持续推出更多的开源项目代码解析，如有更好的意见请留言回复或者私信。运行不起来可以联系我
码云地址：
Ruoyi-Plus:本项目基于RuoYi-Vue-Plus进行二次开发扩展Flowable工作流功能，支持在线表单设计和丰富的工作流程设计能力。如果觉得这个项目不错，麻烦点个star。
OK，关于数据提交网站源码分享和数据禾网站的内容到此结束了，希望对大家有所帮助。