广告位

Simditor的图片上传功能实现,基于django开发

大家好,这里是Python技术宅的个人博客,很高兴又和大家见面了。

今天我们要讲的是基于django如何使用Simditor实现图片上传功能,因为是开发小白,搞了一个下午才出来的,不吝赐教。

为了不影响其他app的现有功能,本博主就直接见了一个app(名称为uplaod)用来开发这个功能,可能比较繁琐,但是还是有很多好处的,比如代码重建时不用纠结该那块。

新建app的流程再次不做过多描述,在此仅展现下目录结构:

media/
    iamges/
uplaod/
    iamges/    
    migrations/
    __init__.py
    admin.py
    apps.py
    models.py
    tests.py
    urls.py
    views.py

下面就让我们开始simditor上传图片的功能实现吧

首先,我们要在之前的文章:django后台添加添加富文本编辑器simditor 中提到的textarea.js中添加下面一段upload代码,完整的如下:

$(function() {
    var editor = new Simditor({
        textarea: $("#id_content"),
        //optional options
        upload: {
            url: '/upload/image/',
//          params: {'csrfmiddlewaretoken': csrftoken,},
            fileKey: 'upload_image',
            connectionCount: 3,
            leaveConfirm: 'Uploading is in progress, are you sure to leave this page?',
        }
    });
});

在这里,本博主省去了params中的csrftoken认证,如果需要,大家还需要在深入研究下。

其中,url为上传图片api的url,即django中处理该请求的view对应的url;fileKey是POST数据里图片文件的键;params里可以添加其他需要传给服务器的POST数据;connectionCount是同时上传的图片的数量;leaveConfirm为上传图片过程中关闭页面会弹出的提示。

然后就是,view.py编写,具体内容如下:

from django.core.exceptions import PermissionDenied
from django.core.files.storage import default_storage
from django.http import JsonResponse
from django.conf import settings



def upload_image(request):
    if request.method == 'POST':
        image = request.FILES['upload_image']
        print('hello')
        if image.name.split('.')[-1] in ['jpg', 'jpeg', 'png', 'bmp', 'gif']:
            #这里的file_path指的是服务器上保存图片的路径
            file_path = settings.MEDIA_ROOT + '/images/' + image.name[-10:]
            file_path = default_storage.save(file_path, image)
            return JsonResponse({
                'success': True,
                # 这里的file_path指的是访问该图片的url
                'file_path': settings.MEDIA_URL + 'images/' + file_path.split('/')[-1],
                'msg': 'Success!',
            })
        else:
            return JsonResponse({
                'success': False,
                'file_path': '',
                'msg': 'Unexpected File Format!'
            })
    else:
            raise PermissionDenied('Only Accept POST Request!')



代码中的注释应该可以解决你们的疑问,结合本博主的代码参考理解哈。

最后别忘了urls.py,具体如下:

from django.conf.urls import url
from django.conf.urls.static import static
from django.conf import settings
from upload import views

urlpatterns=[
    url(r'^image/$', views.upload_image, name='upload_image'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

到这里,图片上传的功能就基本实现了,不过我发现的问题还没有解决,图片的大小无法控制,后续再跟进解决了。

附带一张图片,一做验证,本博主的二维码,哈哈

author.jpg

打赏
随机文章
广告位

添加评论


评论列表,共 2 条评论

  • Simditor的图片上传功能实现,基于django开发

  • Simditor的图片上传功能实现,基于django开发