解决了wangeditor中多图片上传报错的问题

在使用wangeditor时遇到多图片上传报错的难题,通过前端修改,将返回的图片数据数组逐个插入,成功解决了多图上传的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题描述:按wangeditor官方的文档代码进行图片上传,发现单一图片很容易实现,但是多图一直报错。
前端是直接copy的demo代码:

    customInsert: function (insertImg, result, editor) {
        // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
        // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
        // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
        var url = result.url
        insertImg(url)
        // result 必须是一个 JSON 格式字符串!!!否则报错

后端为python:

    '''
    0.判断是否是POST方法,否抛出异常
    1.获取request.files数组
    2.循环数组内容,赋值新文件名,然后一一上传,上传地址依次计入列表
    3.返回文件路径列表
    4.将列表和错误代码转换为json返回前端
    '''
    result = {}
    imgUrl = []
    if request.method == 'POST':
        for upfile in request.files.getlist("myFile"):
            # if upfile == None:
            #     result['error']='1'
            #     result['data']=['上茶隧洞段的']
            #     print(result)
            #     return json.dumps(result,ensure_ascii=False)
            # else:
            #     if upfile and upfile.filename:
            filename = upfile.filename
            filepath = os.path.join(app.static_folder, 'files', filename)
            upfile.save(filepath)
            imgUrl.append(url_for('static', filename='%s/%s' % ('files',filename))) 
            #print(imgUrl)
        result['error']="0"
        result['data'] = imgUrl
        print(result)
        return json.dumps(result,ensure_ascii=False)

python调试信息(返回格式为json没有问题):浏览器信息(两个图片地址放在同一个img标签中):

解决办法(在前端将返回的data数组进行遍历,然后逐个insertimg):

    editor.customConfig.uploadImgHooks = {
        customInsert: function (insertImg, result, editor) {
        var urls = new Array()
        urls=result.data;//获取后台返回的url数组,然后遍历数组内容分别插入文档中
        for (x in urls){
            insertImg(urls[x]);
                        }
            }
        };

多文件上传然后问题解决。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值