一 引入
文件上传在日常的开发中是一项基本的操作,在前端中得以广泛的使用,因此将其封装成一个组件显得极为重要,本文主要是基于vue实现的自定义多图片上传组件.
二 自定义vue上传组件
组件的封装

文章插图
三 后端代码实现
根据自己的后端代码具体实现,这里不做过多阐述
@RestController@AllArgsConstructor@RequestMapping("/sys-file")@Api(value = "http://www.kingceram.com/post/sys-file", tags = "文件管理")public class SysFileController {private final SysFileService sysFileService;/*** 上传文件 文件名采用uuid,避免原始文件名中带"-"符号导致下载的时候解析出现异常** @param file 资源* @return R(/ admin / bucketName / filename)*/@PostMapping(value = "http://www.kingceram.com/upload")@Inner(value = http://www.kingceram.com/post/false)public R upload(@RequestPart("file") MultipartFile file) {return sysFileService.uploadFile(file);}/*** 获取文件** @param bucket桶名称* @param fileName 文件空间/名称* @param response* @return*/@Inner(false)@GetMapping("/{bucket}/{fileName}")public void file(@PathVariable String bucket, @PathVariable String fileName, HttpServletResponse response) {sysFileService.getFile(bucket, fileName, response);}}
注意事项:
四 基于的实现自定义数据类型间的转换
为我们提供了个的抽象类,可以帮助我们实现java类型和数据库之间相互类型的转换,我们知道数组并并没有相对应的数据库字段类型,我们可以把他转换成以逗号相隔的字符串保存在数据库中,在java实体类映射转换时,又将其转换成相应的数组
具体实现逻辑如下:
/*** Mybatis数组,符串互转* * MappedJdbcTypes 数据库中的数据类型 MappedTypes java中的的数据类型** @author likun* @date 2021-11-20*/@MappedTypes(value = http://www.kingceram.com/post/{ String[].class }) //java实体类数据类型@MappedJdbcTypes(value = JdbcType.VARCHAR) // 数据库里面对应字段的类型public class JsonStringArrayTypeHandler extends BaseTypeHandler {@Overridepublic void setNonNullParameter(PreparedStatement ps, int i, String[] parameter, JdbcType jdbcType)throws SQLException {ps.setString(i, ArrayUtil.join(parameter, StrUtil.COMMA));}@Override@SneakyThrowspublic String[] getNullableResult(ResultSet rs, String columnName) {String reString = rs.getString(columnName);return Convert.toStrArray(reString);}@Override@SneakyThrowspublic String[] getNullableResult(ResultSet rs, int columnIndex) {String reString = rs.getString(columnIndex);return Convert.toStrArray(reString);}@Override@SneakyThrowspublic String[] getNullableResult(CallableStatement cs, int columnIndex) {String reString = cs.getString(columnIndex);return Convert.toStrArray(reString);}}
【自定义vue组件--实现多图片上传】查看转换结果

• Part1用Vue3.0 开发一款导入浏览器书签的在线书签
• wex5 数据绑定组件简单介绍
• Spring Cloud Netflix五大组件简介
• SVN版本控制软件-图片含义详解
• Vue学习——【第二弹】
• 自定义feign配置与服务调用的安全验证
• vue项目结构目录介绍
• 【Vue前端开发学习】第2章，Vue项目目录结构
• 二、Vue2.0项目结构内容及配置解析
• VUE3中，使用.env.development和.env.production