python+Django+Vue前后端分离开发模式中，问题总结（一）

开发环境：
Django v2.1.6
Django-Ueditor v1.3.6
Django-restframe-work
前端：Vue开发

DjangoUeditor图片上传路径设置

• DjangoUeditor图片上传路径主要由项目Ueditor根路径下的form.py文件class UEditorField(forms.CharField):中的. imagePath参数决定。

• 同样需要设置项目根路径下的settings.py文件中的MEDIA_ROOT和MEDIA_URL 参数。

模型中使用Uedior如下所示：

    goods_desc = UEditorField(verbose_name=u"内容", imagePath="goods/images/", width=1000, height=300,
                              filePath="goods/files/", default='')

项目的settings.py中的设置如下：

MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")

问题一：后端使用Ueditor上传图片，前端图片无法显示？

问题描述：
在前后端分离开发模式中，使用百度富文本编辑器UEditor在内容编辑区域中上传图片后，数据传输到前端，图片不显示，原因是默认情况下，上传后的图片写入数据库中只有相对路径、没有完整域名。

UEditor上传图片，其对应model字段经后端序列化后返回给前端的JSO格式数据如下：

 "goods_desc": "
 <p><img src=\"/media/goods/images/2_20170719161405_249.jpg\" title=\"\" alt=\"2.jpg\"/></p>
 <p><img src=\"/media/goods/images/2_20170719161414_628.jpg\" title=\"\" alt=\"2.jpg\"/></p>
 <p><img src=\"/media/goods/images/2_20170719161435_381.jpg\" title=\"\" alt=\"2.jpg\"/>
",

原因分析：
针对于DjangoUeditor源码，我们主要看以下两个函数（位于项目Ueditor根路下的views.py），如下：

@csrf_exempt
def UploadFile(request):
    """上传文件"""
  	"""
  	......省略部分源码
  	"""
    # 取得输出文件的路径
    OutputPathFormat, OutputPath, OutputFile = get_output_path(
        request, upload_path_format[action], path_format_var)

    # 所有检测完成后写入文件
    if state == "SUCCESS":
        if action == "uploadscrawl":
            state = save_scrawl_file(
                request, os.path.join(OutputPath, OutputFile))
        else:
            # 保存到文件中，如果保存错误，需要返回ERROR
            upload_module_name = USettings.UEditorUploadSettings.get(
                "upload_module", None)
            if upload_module_name:
                mod = import_module(upload_module_name)
                state = mod.upload(file, OutputPathFormat)
            else:
                state = save_upload_file(
                    file, os.path.join(OutputPath, OutputFile))

    # 返回数据
    return_info = {
        # 保存后的文件名称
        'url': urljoin(USettings.gSettings.MEDIA_URL, OutputPathFormat),
        # USettings.gSettings.MEDIA_URL为我们项目settings.py中设置的MEDIA_URL相对路径

        'original': upload_file_name,  # 原始文件名
        'type': upload_original_ext,
        'state': state,  # 上传状态，成功时返回SUCCESS,其他任何值将原样返回至图片上传框中
        'size': upload_file_size
    }
    return HttpResponse(json.dumps(return_info, ensure_ascii=False), content_type="application/javascript")


def get_output_path(request, path_format, path_format_var):
    # 取得输出文件的路径，得到保存图片的路径
	"""
	......
	"""

解决方式：
将返回数据中的url字段的值做以下更改即可，

    # 解决后端Ueditor上传图片，保存到数据库为相对路径，导致前端无法显示图片的问题
    Real_Url = 'http://127.0.0.1:8000'+ USettings.gSettings.MEDIA_URL
    # 返回数据
    return_info = {
        # 保存后的文件名称
        # 'url': urljoin(USettings.gSettings.MEDIA_URL, OutputPathFormat),
        # USettings.gSettings.MEDIA_URL为我们项目settings.py中设置的MEDIA_URL相对路径
        
        'url': urljoin(Real_Url, OutputPathFormat),
        'original': upload_file_name,  # 原始文件名
        'type': upload_original_ext,
        'state': state,  # 上传状态，成功时返回SUCCESS,其他任何值将原样返回至图片上传框中
        'size': upload_file_size
    }

此时，经后端序列化返回的json字段中图片路径即为绝对路径=完整域名+相对路径。

总结：

在数据批量导入数据库中时，若导入对应Ueditor字段的数据格式一般如下：（相对路径）

 'goods_desc':'
 <p><img src="/media/goods/images/2_20170719161405_249.jpg" title="" alt="2.jpg"/></p>
 <p><img src="/media/goods/images/2_20170719161414_628.jpg" title="" alt="2.jpg"/></p>
 <p><img src="/media/goods/images/2_20170719161435_381.jpg" title="" alt="2.jpg"/></p>'
    },

由于图片路径为相对路径，在前后端分离开发模式中，后端序列化后返回给前端该字段，会导致前端图片无法加载（缺少完整域名，前端得不到静态资源）。

因而：
在数据批量导入数据库的时候，对应于UEditorField的字段，我们应使用域名+相对路径（即绝对路径）。

不足之处，希望批评指正！！！