Django项目文件上传

前后端不分离模式下的文件上传

1.在setting.py文件中templetes模块配置以下内容

#使用媒体文件 上传的文件
'django.template.context_processors.media'

2.引用seting.py文件中的MEDIA_URL

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

<li><span>用户头像：</span><img src="{{ MEDIA_URL }}{{ user.icon }}"</li>

3.本地上传

有form:
<form action='' method='post' enctype="multipart/form-data">
<input type="hidden" name="uid" value= {{ user.id }}>
{% csrf_token %}
<li><span>用户头像：</span><img src="{{ MEDIA_URL }}{{ user.icon }}" alt="" id="user_icon">
<input type='submit' value='修改头像' onclick='javascript:$("#hiddenFile").click();'/>
<input id='hiddenFile' type='file' style="display:none" onchange='change_icon();'/>
</li>
</form>

无form：
<li><span>用户头像：</span><img src="{{ MEDIA_URL }}{{ user.icon }}" alt="" id="user_icon">
<input type='button' value='修改头像' onclick='javascript:$("#hiddenFile").click();'/>
{% csrf_token %}
<input id='hiddenFile' type='file' style="display:none" onchange='change_icon();'/>
</li>

利用Ajax上传头像
{% block myjs %}
<script>
function change_icon() {

{#// 构建form表单 采用无form表单时使用#}
{#var form = new FormData();#}
{#form.append('uid', {{ user.id }});#}
{#form.append('icon', $("#hiddenFile")[0].files[0]);#}
{#csrf = $('input[name="csrfmiddlewaretoken"]').val();#}
{#form.append('csrfmiddlewaretoken', csrf);#}

$.ajax({
url: '{% url 'user:modify_icon' %}',
type: 'POST',
dataType: 'json',
data: form,
contentType: false,  //---》 是否添加Content-Type请求头
processData: false,  //-- -》 enctype的值不进行编码     multipart / form - data
success: function (data) {
console.log(data);
if (data.msg == 'ok') {
$('#user_icon').attr('src', '{{ MEDIA_URL }}' + data.image);
}
}
,
error: function (data) {
console.log(data);
}
})
;
}
</script>
{% endblock %}

后端接收
#此场景为上传头像，图片保存在用户模型icon字段中
# 修改图片
def modify_icon(request):
if request.method == 'POST':
# icon = request.POST.get('')
uid = request.POST.get('uid')
icon = request.FILES.get('icon')  # - ----> 所有文件上传的内容都必须通过request.FILEs
user = User.objects.get(pk=uid)
user.icon = icon  # - ---> models     icon = models.ImageFiled()
user.save()
return JsonResponse({'msg': 'ok', 'image': str(user.icon)})

• 点赞
• 收藏
• 分享
• 文章举报