美文网首页
上传头像

上传头像

作者: 马梦里 | 来源:发表于2018-01-18 16:56 被阅读0次
  1. 在 User 类中增加字段:
@classmethod
def valid_names(cls):
    names = super().valid_names()
    names = names + [
        ('username', str, ''),
        ('password', str, ''),
        ('user_image', str, '/uploads/default.png'),
    ]
    return names

注意:
数据库中 user_image 中存储的是图片的路径,而非文件实体,所以数据类型为字符串;

  1. 建立上传头像的表单
<form method=post
      action='{{ url_for(".add_img") }}'
      enctype=multipart/form-data>
    <input type=file name=avatar>
    <!--<input type=submit value=Upload>-->
    <button type="submit">Upload</button>
</form>
<img src="{{ user.user_image }}" title="avatar"/>
  • 以二进制上传,所以 enctype=multipart/form-data
  1. 编写函数
def valid_suffix(suffix):
    valid_type = ['jpg', 'png', 'jpeg']
    return suffix in valid_type

@main.route('/image/add', methods=["POST"])
def add_img():
    u = current_user()
    file = request.files['avatar']
    suffix = file.filename.split('.')[-1]
    if valid_suffix(suffix):
        filename = '{}.{}'.format(str(uuid.uuid4()), suffix)
        file.save(os.path.join('user_image', filename))
        User.update(u.id, dict(
            user_image='/uploads/' + filename
        ))

    return redirect(url_for(".profile"))

@main.route("/uploads/<filename>")
def uploads(filename):
    return send_from_directory('user_image', filename)
  1. 获取文件用:
    request.files[' ']
    • post 方法
      request.form
    • get 方法
      request.get(' ')
  2. 重新构造文件名防止 web 攻击
    • 用 . 将扩展名和文件名分开
    • 生成随机字符串为文件名
    • 将真正文件存储至 根目录user_image/filename
      文件本身是二进制格式存储,存储在相应的扩展名下。
  3. 更新 User 类的 user_image 字段,这里存储的是文件名
  4. uploads() 函数根据 文件名 ,在指定路径下返回文件
    这样就把静态资源的请求和一般的请求分开了。静态资源的请求可以交给 nginx ,其他请求的处理交给 gunicorn。
<img src={{ u.user_image }}>:
<img src="/uploads/d220679e-5c27-44e5-9876-cf155bcaa223.jpg" title="avatar"/>

这是一个相对路径,完整的是:
http://localhost:7000/uploads/filename
加载图片时,会自动访问图片的路径,那么就会启动 /uploads 路由对应的函数,根据变量 filename 去指定文件夹下获取文件。

相关文章

  • 图片上传与ajax打包form里面的数据

    目录 头像上传的前端处理 头像上传的后端处理 ajax打包form里面的数据 1. 头像上传的前端处理 需求: 效...

  • 移动端上传头像

    上传头像

  • 纯前端实现截图生成头像

    上传头像插件 目的: 帮助开发者快速开发上传头像功能点 背景: 现在b,g能搜到的头像上传插件并不太好用,所以想提...

  • 开发经验总结

    1.头像上传功能 1.拍照或从相册选择, 头像上传。 头像修改成功之后,需要把头像image保存到沙盒。 每次页面...

  • 上传头像

    背景 在小米的面试中,最后一轮被问到了一个场景。即关于在 WebView 下开发一个用户上传头像的场景的完整流程。...

  • 上传头像

    在 User 类中增加字段: 注意:数据库中 user_image 中存储的是图片的路径,而非文件实体,所以数据类...

  • 上传头像

    //创建button和imageView -(void)createUI{ _headImageView = [F...

  • 上传头像

    NSString *base64string=[imagedata base64Encoding];

  • 头像上传

    https://cnodejs.org/topic/51fc8bd944e76d216ab64939

  • 头像上传

    xxxx no.2

网友评论

      本文标题:上传头像

      本文链接:https://www.haomeiwen.com/subject/jbmwoxtx.html