Django 图片上传

1、django上传图片，主要是将图片存储在内存或者临时文件中。所以，上传图片，就是将图片的路径存储在数据库中。

1、图片大小不大于2.5M时，存储在内存。

2、图片大小大于2.5M时，存储在临时文件中。

2、上传图片步骤。

1）设置上传文件的目录。

        在settings.py文件下，设置上传文件的目录。（与设置静态目录的方法一致）

 

 2）在数据库中创建数据表，其中有关图片的字段设置为varchar，用于存储图片路径。（使用的数据库为mysql）

        设置存储图片路径的字段为pic。

3）编写models.py文件，将图片路径的字段设置为models.ImageField类型。将上传的图片存储到media下的pic目录下。

pic = models.ImageField(upload_to='pic/',verbose_name=u'图片地址')

4）html前端页面显示上传图标。

<div class="form-group">
	<label for="pic">产品的图片</label>
	<form>
		<input id="image-uploadify" name="pic" type="file" accept=".xlsx,.xls,image/*,.doc,audio/*,.docx,video/*,.ppt,.pptx,.txt,.pdf" multiple>
	</form>
</div>

 5）编写views.py文件，django通过request.FILES.get('')方法获取前端的图片对象。

def insertProductData(request):
    mod = Product.objects  # 获取Drug模型的Model操作对象
    # 获取上传文件的处理对象
    pic = request.FILES.get('pic')
    try:
        # 创建插入
        mod.create(
            name=request.POST.get("name"),
            code = request.POST.get("code"),
            pic=pic,
            purchase_price = request.POST.get("purchase_price"),
            sole_price=request.POST.get("sole_price"),
        )
        context = {'info': '添加成功！'}
    except Exception as res:
        print(res)
        context = {'info': res}
    return JsonResponse({"msg": context})

 输出request.FILES.get('pic')，可得到图片的名称。

6）ajax将表单数据插入到数据库。由于需要长传图片信息，enctype需要为multipart/form-data，所以用表单来初始化。

$(document).on("click", "#add_save", function () {
    if (confirm("确认保存数据吗？")) {
        // 用表单来初始化
        var formData=new FormData();
        formData.append('name',$("#name").val());
        formData.append('purchase_price',$("#purchase_price").val());
        formData.append('code',$("#code").val());
        formData.append('sole_price',$("#sole_price").val());
        formData.append('pic',$("input[name='pic']")[0].files[0]);
        $.ajax({
            url: "/product/insertProductData/",
            type: 'post',
            async: true,
            // enctype:"multipart/form-data",
            data: formData, 
            contentType:false,// jQuery不要去设置Content-Type请求头
            processData:false,// jQuery不要去处理发送的数据
            success: function (result) {
                alert(result.msg.info);
                //1.关闭模态框
                $("#addModel").modal("hide");

                }
            });
      } else {
        return false;
      }
});

 【注】使用表单序列化（ $("form").serialize() ），无法上传图片信息，request.FILES获取为空。

 

如何将数据库的图片显示到html页面上：django 调用数据库图片的路径并在html显示_weixin_43235307的博客-CSDN博客