django项目添加图片上传功能

Posted 2021-02-28 fengzi7314

第一步，在settings.py中加入如下：

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

第二步，在view视图中添加如下函数（restful是我封装的函数，可以看另外一篇文章查看内容）

@require_POST
def upload(request):
    file = request.FILES.get(‘file‘)
    name = file.name
    with open(os.path.join(settings.MEDIA_ROOT,name), ‘wb‘) as f:
        for chunk in file.chunks():
            f.write(chunk)
    url = request.build_absolute_uri(settings.MEDIA_URL+name)
    return restful.result(data={‘url‘: url})

第三步，编写ajax.js来实现通过ajax发送图片到后台，这里要注意，图片必须通过formData函数来封装，并且在发送post请求是需要加入额外两个参数（process和contentType）

function Banners() {
    var self = this;
    self.counts = $(‘.loop-img‘).length;

}

//cms后台管理系统修改轮播图片
Banners.prototype.addbanners = function () {
    var self = this;
    var addBtn = $(‘.cms-header .button button‘);
    addBtn.click(function () {
        console.log(self.counts);
        var tpl = template(‘add-banners‘,{‘counts‘: self.counts});
        var bannerGrouplist = $(‘.row‘);
        bannerGrouplist.prepend(tpl);
        var bannerItem = bannerGrouplist.find(‘.loop-img:first‘);
        self.addimg(bannerItem);
        self.counts += 1;
    });
};
//点击添加图片按钮事件
Banners.prototype.addimg = function (bannerItem) {
    var inputimg = bannerItem.find(‘img‘);
    var self = this;
    inputimg.click(function () {
        var inputimage = $(this).parent().siblings(‘#addimg‘);
        inputimage.click();
        inputimage.change(function () {
            var file = this.files[0];
            var formdata = new FormData();
            formdata.append(‘file‘,file);
            $.post({
                ‘url‘: ‘/cms/upload/‘,
                ‘data‘: formdata,
                ‘processData‘: false,
                ‘contentType‘: false,
                ‘success‘: function (result) {
                    if (result.code === 200) {
                        var url = result.data.url;
                        console.log($(this));
                        inputimg.attr(‘src‘,url);
                    }
                }
            })
        })
    });


};


Banners.prototype.run = function () {
    this.addbanners();
};

$(function () {
    var banners = new Banners();
    banners.run();
});

结果示例图如下：