Django项目实战之用户头像上传与访问的示例

2024-09-28 12:56:55

1 将文件保存到服务器本地

upload.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
  {% csrf_token %}
  <div>用户名:<input type="text" name="username"></div>
  <div>头像<input type="file" name="avatar"></div>
  <input type="submit" value="提交">
</form>
</body>
</html>

urls.py

from django.conf.urls import url
from app01 import views
urlpatterns = [
  url(r'^upload',views.upload)
]

views.py

from django.shortcuts import render,HttpResponse
def upload(request):
  if request.method == 'POST':
    name = request.POST.get('username')
    avatar = request.FILES.get('avatar')
    with open(avatar.name,'wb') as f:
      for line in avatar:
        f.write(line)
    return HttpResponse('ok')
  return render(request,'upload.html')

总结

这样，我们就做好了一个基本的文件上传小示例，这里需要注意的有几点：
1.form表单里需要加上csrf_token验证
2.文件的input框的type的值为file
3.在视图函数中获取文件要用request.FILES.get()方法
4.通过obj.name可以获取文件的名字

2 将文件上传到数据库

models.py

from django.db import models
 class User(models.Model):
  username = models.CharField(max_length=16)
  avatar = models.FileField(upload_to='avatar')

views.py

def upload(request):
  if request.method == 'POST':
    name = request.POST.get('username')
    avatar = request.FILES.get('avatar')
    models.User.objects.create(username=name,avatar=avatar)
    return HttpResponse('ok')
  return render(request,'upload.html')

总结

上面已经实现了将文件上传到数据库的功能，需要注意的有几点：
1.所谓的上传到数据库，不是讲图片本身或者二进制码放在数据库，实际上也是将文件上传到服务器本地，数据库只是存了一个文件的路径，这样用户要调用文件的时候就可以通过路径去服务器指定的位置找了
2.创建ORM的时候，avatar字段要有一个upload_to=''的属性，指定上传后的文件放在哪里
3.往数据库添加的时候，文件字段属性赋值跟普通字段在形式上是一样的，如：models.User.objects.create(username=name,avatar=avatar)
4.如果有两个用户上传的文件名重复，系统会自动将文件改名，效果如下：

附加

功能我们是实现了，看起来我们在调用文件的时候，只需要通过数据库文件路径已经保存的文件本身就可以访问图片，让它出现在网页上，其实并不是这样，

我们需要配置一些东西，django才可以找的到，不然的话就会过不了urls验证，而我们之所以可以直接访问static里的静态文件，是因为django已经帮我们配置好了。

配置步骤如下：

1、在站点的setting.py里配置

MEDIA_ROOT=os.path.join(BASE_DIR,"blog","media") #blog是项目名，media是约定成俗的文件夹名

MEDIA_URL="/media/"   # 跟STATIC_URL类似，指定用户可以通过这个路径找到文件

2、在urls.py里配置

from django.views.static import serve
from upload import settings        #upload是站点名
url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),

配置完后，就可以通过http://127.0.0.1:8001/media/milk.png访问到图片了

3 用AJAX提交文件

upload.html

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
<form>
  {% csrf_token %}
  <div>用户名:<input id="name-input" type="text"></div>

  <div>头像<input id="avatar-input" type="file"></div>
  <input id="submit-btn" type="button" value="提交">
</form>
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script>
  $('#submit-btn').on('click',function () {
    formdata = new FormData();
    formdata.append('username',$('#name-input').val());
    formdata.append("avatar",$("#avatar")[0].files[0]);
    formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());
 $.ajax({
 processData:false,contentType:false,url:'/upload', type:'post', data:formdata,success:function (arg)
 {
if (arg.state == 1){ alert('成功！') }
else { alert('失败！') } } }) });
 </script>
 </body>
</html>

views.py

from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
from app01 import models
def upload(request):
  if request.method == 'POST':
    name = request.POST.get('username')
    avatar = request.FILES.get('avatar')
    try:
      models.User.objects.create(username=name,avatar=avatar)
      data = {'state':1}
    except:
      data = {'state':0}
    return JsonResponse(data)
  return render(request,'upload.html')

总结

1.Ajax上传的时候，按钮的tpye一定不要用submit
2.Ajax上传的时候data参数的值不再是一个普通‘字典'类型的值，而是一个FormData对像

创建对象formdata = new FormData();
往里面添加值formdata.append('username',$('#name-input').val());

3.Ajax在做post提交的时候要加上csrf验证

formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());

4.最后，Ajax上传文件的时候要有两个参数设置

processData:false
contentType:false

4 上传图片文件的时候有预览功能

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
<form>
  <!----用一个label标签将上传文件输入框跟图片绑定一起，
     点击图片的时候就相当于点击了上传文件的按钮---->
  <label><img id="avatar-img" src="/static/img/default.png" width="80px" height="80px">
    <div>头像<input id="avatar-input" hidden type="file"></div>

  </label>
  <input id="submit-btn" type="button" value="提交">
</form>
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script>
  // 上传文件按钮（label里的图片）点击事件
  $('#avatar-input').on('change',function () {
    // 获取用户最后一次选择的图片
    var choose_file=$(this)[0].files[0];
    // 创建一个新的FileReader对象，用来读取文件信息
    var reader=new FileReader();
    // 读取用户上传的图片的路径
    reader.readAsDataURL(choose_file);
    // 读取完毕之后，将图片的src属性修改成用户上传的图片的本地路径
    reader.onload=function () {
       $("#avatar-img").attr("src",reader.result)
    }
  });
</script>

5 大总结

对于文件上传，不管是直接form提交也好，Ajax提交也好，根本问题是要告诉浏览器你要上传的是一个文件而不是普通的字符串

而怎么样告诉浏览器呢，就是通过请求体重的ContentType参数，我们上传普通的字符串的时候不用指定，因为它有默认值，

而如果要传文件的话，就要另外指定了。总结以下几点
1.form表单上传的话是通过 enctype="multipart/form-data" 来指定ContentType
2.ajax上传的话是通过 processData:false 和 contentType:false来指定ContentType
3.form上传的时候，文件数据是通过<input type="file">标签来‘'包裹‘'数据，
4.ajax上传的时候，是通过一个 FormData 实例对象来添加数据，传递的时候传递这个对象就行了
5.数据传递过去之后，是封装在request.FILES里，而不是request.POST里

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

Django使用httpresponse返回用户头像实例代码
Django imgareaselect手动剪切头像实现方法

Django使用httpresponse返回用户头像实例代码

本文研究的主要是Django使用httpresponse返回用户头像,下面是相关实例代码. 当请求一个页面时,Django 把请求的 metadata 数据包装成一个 HttpRequest 对象,然后 Django 加载合适的 view 方法,把这个 HttpRequest 对象作为第一个参数传给 view 方法.任何 view 方法都应该返回一个 HttpResponse 对象. 代码示例: def test(request): # 获取当前文件的路径.父路径以及下一层的路径 curr_di
Django imgareaselect手动剪切头像实现方法

本文实例讲述了Django imgareaselect手动剪切头像的方法.分享给大家供大家参考.具体如下: index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>上传图片</title> </head> <body> <form action="." method="
Django项目实战之用户头像上传与访问的示例

1 将文件保存到服务器本地 upload.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <form action="" method="post" enctype="multipart/form-data">
详解Vue+axios+Node+express实现文件上传(用户头像上传)

Vue 页面的代码 <label for='my_file' class="theme-color"> <mu-icon left value="backup"></mu-icon> 修改头像 </label> <input type="file" ref="upload" name="avatar" id='my_file' style="d
Element 头像上传的实战

本篇文章用到 element官网和七牛云官网 element-ui 官网:https://element.eleme.io/#/zh-CN 七牛云官网:https://www.qiniu.com/ 1.七牛云注册登录之后然后实名认证 2.进入对象存储后进入空间管理 3.新建空间在这里就能拿到 cdn测试域名 python SDK 在开发者中心可以查看使用七牛云就需要安装他 pip install qiniu 我们使用封装的思想进行封装使用文件名:comm.py # 七牛云
SpringBoot图片上传和访问路径映射

简介做移动端对接,框架用的SpringBoot,接口RESTful,实现一个图片上传功能,图片上传是个经典的应用场景了,完成后,做个笔记记录一下,希望能帮到攻城狮们开发步骤 1.先贴图片上传工具类 package com.prereadweb.utils; import java.io.File; import java.io.FileOutputStream; import java.util.UUID; /** * @Description: 文件工具类 * @author: Yangx
Vue vant-ui使用van-uploader实现头像上传功能

效果图: 项目中是使用有赞vant-ui框架实现的头像上传替换功能代码布局结构: <van-row class="sendInfo"> <van-col span="24" class="flex colorf topInfo p20">  <van-uploader :after-read="afterCard" :before-read="be
针对多用户实现头像上传功能PHP代码适用于登陆页面制作

一个网站,其实说白了就是某几个特定功能的组合,而更换用户头像就在这些功能之中.今天就来做个测试,针对不同的用户,实现头像上传功能. -------------------------------------------------------------------------------- 成品图思路 •针对不同的用户上传头像,我们要为每一个已登录的用户创建一个文件夹,文件夹的名称以当前用户的用户名为准. •用户上传成功后,跳转到用户登录成功后的页面,并刷新用户头像. 登陆页面表单制作
Django后端分离使用element-ui文件上传方式

1:导入element  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" >  <script src="https://cdn.jsdelivr.net/npm/vue@2
js实现头像上传并且可预览提交

在用户注册账号或者修改资料的时候会需要用户在本地选择一张图片作为头像,并同时预览, 常见的思路有两种:一是将图片上传至服务器的临时文件夹中,并返回该图片的url,然后渲染在html页面:另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存. 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源:方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高. 这里介绍的是直接在本地内存中预览图片,用户确认提交后再上传至服务器保存这种方法 html <div class="r
Django项目实战之配置文件详解

创建项目 django-admin startproject meiduo_mall 添加工程完整结构包启动前端 python -m http.server 8080 配置假域名将hosts文件复制到桌面添加127.0.0.1 www.meiduo.site 替换掉之前的hosts文件如果访问django项目不要忘记添加allower_hosts mysql数据库配置 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mys

Django项目实战之用户头像上传与访问的示例

您可能感兴趣的文章:

相关推荐

随机推荐