etidorMD图片上传cos并展示

0.资源下载 https://gitee.com/yqmc/cos-js-sdk-v5minjs-download.git
1. css
    <link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.min.css' %}">
<!--全屏-->
.editormd-fullscreen {
            z-index: 1001;
        }
2. 内容
<form id="addEditForm" novalidate>

                            {% csrf_token %}
                            {% for field in form %}
                                {% if field.name == 'content' %}
                                    <div class="form-group">
                                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                        <div id="editor">
                                            {{ field }}
                                        </div>
                                        <span class="error-msg"></span>
                                    </div>
                                {% else %}
                                    <div class="form-group">
                                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                        {{ field }}
                                        <span class="error-msg"></span>
                                    </div>
                                {% endif %}
                            {% endfor %}

                            <input id="id_addEditForm" type="button" class="btn btn-success" value="提交"
                                   style="margin-top: 5px;">
                        </form>
3.js
    <script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>
4.js
$(function () {         
            initEditorMd();       
        })
// editor_md
        function initEditorMd() {
            var WIKI_UPLOAD_URL = "{% url 'upload_img' project_id=request.tracer.project.id %}"
            editormd('editor', {
                placeholder: "请输入内容",
                height: 500,
                path: "{% static 'plugin/editor-md/lib/' %}",
                imageUpload: true,
                imageFormats: ["jpg", 'jpeg', 'png', 'gif'],
                imageUploadURL: WIKI_UPLOAD_URL
            })
        }

# url
        url(r'^wiki/upload/img.html/', wiki.upload_img, name='upload_img'),

# view
from django.views.decorators.csrf import csrf_exempt
from utils.tencent import cos
from utils.Md5 import uid
# 图片路径拼凑
def uid(string):
    data = "{}-{}".format(str(uuid.uuid4()), string)
    return md5(data)

@csrf_exempt
def upload_img(request, project_id):
    result = {
        'success': 0,
        'message': None,
        'url': None
    }
    # print(request.FILES)
    # < MultiValueDict: {'editormd-image-file': [ < InMemoryUploadedFile: 5.png(image / png) >]} >
    editormd_image_file = request.FILES.get('editormd-image-file')
    if not editormd_image_file:
        result['message'] = '文件不存在'
        return JsonResponse(result)
    # 有文件
    # 上传图片路径拼接 editormd_image_file 是一个对象
    suffix = editormd_image_file.name.split('.')[-1]  # png
    Bucket = request.tracer.project.bucket
    region = request.tracer.project.region
    Body = editormd_image_file
    Key = '{}.{}'.format(uid(request.tracer.user.telephone), suffix)
    # 进行cos存储
    # 返回一个url----返回给前端展示出来
    url = cos.upload_img(Bucket=Bucket, region=region, Body=Body, Key=Key)
    result['success'] = 1
    result['url'] = url
    print(url)
    return JsonResponse(result)