Django Ajax 图片上传

models.py

class Image(models.Model):
    ImageID = models.AutoField(max_length=128, verbose_name='图片ID', primary_key=True)
    ImageName = models.ImageField(upload_to='./static/Image', verbose_name='图片', null=True)

views.py

def uploadimage(request):
    file_img = request.FILES.getlist('file')  # 获取文件对象列表
    print(file_img)
    for i in file_img:
        image = models.Image()
        image.ImageName = i
        try:
            image.save()  # 保存数据
            return JsonResponse(1, safe=False)
        except Exception as e:
            print(e)
            return JsonResponse(0, safe=False)

html js部分

<script type="text/javascript">
    $(function() {
        var simplemde = new SimpleMDE({<!--实例化Markdown编辑器-->
        element: document.getElementById("fieldTest"),
        autoDownloadFontAwesome: true,
        status: false
        });
        var testPlain = simplemde.value(),<!--获取文章内容-->
            testMarkdown = simplemde.markdown(testPlain);<!--文章内容转为html格式-->
        $(".editor-preview-side").addClass("markdown-body");
            console.log(testPlain)

        // 阻止浏览器默认打开拖拽文件
        window.addEventListener("drop", function (e) {
            e = e || event
            if (e.target.className == "CodeMirror-scroll") {  // check wich element is our target
                console.log("有文件拖拽到编辑器了")
                e.preventDefault()
            }
        }, false)

        // 拖拽图片上传
        simplemde.codemirror.on('drop', function (editor, e) {
            console.log("codemirror on drop")

            if (!(e.dataTransfer && e.dataTransfer.files)) {
                _this.$message({
                    message: "该浏览器不支持操作",
                    type: 'error'
                })
                return
            }
            let dataList = e.dataTransfer.files
            console.log("dataList:" + dataList)
            console.log(dataList)
            for (let i = 0; i < dataList.length; i++) {
                if (dataList[i].type.indexOf('image') === -1 ) {
                    _this.$message({
                        message: "仅支持Image上传",
                        type: 'error'
                    })
                    continue
                }
                let formData = new FormData()
                formData.append('file', dataList[i]) // 注意这里的名称与后端要一致
                console.log(formData)
                // 开始上传文件
                fileUpload(formData);
                console.log('sss')

            }
        });
            // ajax请求后端保存图片
        function fileUpload(formData) {
            $.ajax({
                url: '/uploadimage/',
                type: 'POST',
                cache: false,
                data: formData,
                timeout: 5000,
                //必须false才会避开jQuery对 formdata 的默认处理
                // XMLHttpRequest会对 formdata 进行正确的处理
                processData: false,
                //必须false才会自动加上正确的Content-Type
                contentType: false,
                xhrFields: {
                    withCredentials: true
                },
                success: function (data) {
                    console.log(data)
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log("上传出错了")
                }
            });
        }

urls.py

urlpatterns = [
    path('uploadimage/', views.uploadimage),
]

https://www.catbro.cn/detail/5b1b94b5d5268b000ffe60af.html
https://blog.csdn.net/sinat_18866031/article/details/94717764