使用layui框架完成多图片上传以及layui的富文本功能，2024最新阿里前端面经

formData.append(‘content’, content);

• 可以通过监听”取消发布“的按钮将富文本的内容清除

$(‘.reset-btn’).click(function () {

layedit.setContent(index, ‘’)

})

2.1 实现效果如下

3. layui实现多张图片上传

3.1 需求

1.上传多张图片

2.点击图片的时候进行删除

3.点击了”上传“按钮之后，上传每一张照片的同时向后台发送请求，后台返回图片的地址

4.前台将每一张图片的地址缓存再input标签中，多张图片的地址以逗号隔开，使得每次点击提交表单按钮的时候，后台直接获取input标签中的地址.val()

3.2 逻辑

• 使用layui上传文件的模块upload.render({})，相关的配置项可以查看官方文档：https://www.layui.com/doc/modules/upload.html

• 这里主要说明执行上传操作时的回调函数

1）before:文件提交上传前的回调，返回一个object参数。一般用于上传完毕前的loading，或者图片预览。在此可以使得在预读图片的时候，