问题描述:按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]);
}
}
};
多文件上传然后问题解决。