Slog50_支配vue框架初阶项目之博客网站-单页-客户端更新头像2

ArthurSlog

SLog-50

Year·1

Guangzhou·China

Aug 26th 2018

GitHub

掘金主页

简书主页

segmentfault

要成就一番事业 既要靠本事上位 又得懂拉拢站队

开发环境MacOS(High Sierra 10.13.5)

需要的信息和信息源:

统一资源定位符(URL)

XMLHttpRequest

vue模版语法 v-bind

FormData

FormData 对象的使用

通过AJAX提交表单和上传文件可以不使用FormData对象

URL.createObjectURL()

开始编码

首先,先理一下思路:

上一篇文章,实现个头像的更新功能,但是需要重新登陆的时候,才会显示更新的图片

这次要做的,就是提交更新后让图片马上更新成最新的图片

考虑一下具体的实现逻辑,使用 vue.js框架双向数据流的功能,可以有下面几种方式:

客户端(浏览器)在提交图片给服务器成功之后,同时客户端(浏览器)把提交的图片覆盖本地的图片

客户端(浏览器)提交图片给服务器后,重新向服务器发送请求,获取最新的图片数据,页面上渲染最新的图片数据

客户端(浏览器)在选择了准备传送的图片之后,提交图片给服务器之前,页面渲染最新的图片

选择第三种方法,我们要在选择图片的时候,同时渲染新的图片

根据 vue模版语法 v-bind,使用 v-bin 绑定 图片的src,让我们可以在 client/signup.js 里可以动态修改 图片的src 的值,正因为 vue.js框架双向数据流的特性,当在 client/signup.js 修改 图片的src 的值的时候,页面上也会同时渲染新的图片

更新后的完整代码

client/signup.js

更新的部分:

server/index.js

URL.createObjectURL(),使用这个方法生成一个 URL资源定位符赋值给图片的src,更新图片

同时,我们需要更新 html文件,在html文件里使用 vue.js模版语法 v-bin

client/app.html

更新部分:

client/app.html

使用 v-bin 绑定了src的值之后,通过 imageSrc 这个对象,js文件 可以 html文件里面图片的 src的值

现在,打开浏览器,输入 127.0.0.1:3000/app.html,点击 signin 按钮

输入账号:ArthurSlog 密码:ArthurSlog,点击登陆

成功登陆之后,点击 “选择文件” 按钮,选择一张你电脑里的图片,然后点击“打开”

正常执行的情况下,你会发现,你的头像已经变成了你最新选取的图片了

再点击 uploadfiles 按钮,观察 服务端终端,正常情况下成功接收到文件,并打印出文件信息

刷新页面,点击 signin 按钮

输入账号:ArthurSlog 密码:ArthurSlog,点击登陆

正常情况下,头像已经更新为你最近更改的图片了

至此,我们实现了客户端头像选取后即时更新的功能。

如果你喜欢我的文章 欢迎点赞 留言

谢谢

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180828G0AKQ000?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券