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)})