个人技术分享

多张图片上传、图片回显、url路径转成File文件

背景：在表单中使用element-plus实现多张图片上传(限制最多10张)，因为还要与其他参数一起上传，所以使用formData格式。编辑表单回显时得到的是图片路径数组，上传的格式是File，所以要进行一次转换。2. 踩坑记录问题：在对图片列表遍历后处理时，一开始在中进行文件格式转换操作，数据项无法插入中，但控制台打印有值。原错误写法：原因：是并发执行，在每次迭代时会立即执行指定的回调函数，并且不会等待上一次迭代的结果，所以并不能保证每次convertUrlToFile操作都已完成。解决方法

基于Vue和uni-app的增强型多选框Checkbox组件开发

该组件通过数据驱动、支持页面正反向传值等特性，提高了组件的灵活性和可重用性。未来，我们可以继续探索组件的更多可能性和应用场景，如支持条件筛选、异步加载数据等，以满足更复杂的前端需求。该组件不仅提供了基本的复选功能，还通过数据驱动、支持页面正反向传值等特性，进一步增强了组件的灵活性和可重用性。页面正反向传值：组件应该能够支持页面正反向传值，即能够将组件的状态传递给父组件，同时也能够接收父组件传递的数据。数据驱动：组件应该能够通过数据驱动，即组件的状态和行为应该由数据决定，而不是通过直接操作DOM元素来实现。

js中数组的filtter方法

方法是 JavaScript 中数组对象的一个内置方法，用于创建一个新数组，新数组中的元素是通过检查指定函数而得出的所有元素。方法会遍历数组中的每个元素，并对每个元素执行提供的函数。如果该函数对某元素返回。假设我们有一个包含数字的数组，我们想要创建一个新数组，其中只包含偶数。（即该元素是否为偶数）。满足条件的元素被收集到新的。数组中的每个元素，并检查每个元素是否满足条件。方法不会改变原数组，而是返回一个新数组。，则该元素会被包含在新数组中。

VueJS ReactJS实现AI问答小助手(2)——流式TTS文字转实时语音播放

文档只给出了一些配置项的说明，以及java端的代码示例，但没有web端的。所以这篇笔记可以给web开发者参考。首先，AI答复的消息是通过SSE()返回的。SSE请求的实现流程后续有时间再填坑。代码实现中，使用了一个onReply回调来执行后续动作。这个方法会连续多次执行，直到消息结束。SSE是单向的，只能由服务端向客户端推送，而流式TTS这种双向通信需要通过socket来实现。socket的实现，原本是打算用封装了心跳、房间等概念的socket.io。

Vue.js中组件化开发实践：自定义导航栏与TabBar组件的设计与实现

摘要随着前端技术的发展和业务的日益复杂，组件化开发成为提升开发效率和降低维护成本的关键。本文将以Vue.js框架为基础，探讨如何设计并实现一个自定义的导航栏与TabBar组件，特别是针对iOS机型的适配和头部导航的自定义。通过阿里巴巴矢量图标库的使用，我们将展示如何为组件添加高度和图标自定义的功能。一、引言在前端开发中，导航栏和TabBar是常见的界面元素，对于用户体验和界面美观度至关重要。然而，传统的开发方式往往将这些元素作为整体应用的一部分，导致修改和维护变得困难。