Slog43_支配vue框架初阶项目之博客网站-单页-载入要上传的图片

本篇文章给大家分享《Slog43_支配vue框架初阶项目之博客网站-单页-载入要上传的图片》，覆盖了数据库的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

• ArthurSlog
• SLog-43
• Year·1
• Guangzhou·China
• Aug 21th 2018

• GitHub
• 掘金主页
• 简书主页
• segmentfault

人生就是这样 苦乐相伴 福祸相依

开发环境MacOS(High Sierra 10.13.5)

需要的信息和信息源：

• HTTP概述
• HTTP
• 互联网是如何工作的
• 万维网是如何工作的
• 统一资源定位符(URL)
• 什么是超链接
• 创建超链接
• AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）
• XMLHttpRequest
• Using files from web applications

开始编码

• 本篇实现 图片的上传 和 头像的修改
• 我们先梳理一下，首先要在客户端部分（浏览器端）实现文件的选择和文件的上传；在服务端实现文件的接收，重要的是接受之后，把接收到的图片替换掉 client/image 文件夹里的图片文件，这样的话，当下次打开浏览器登陆，重新向服务端拉取数据的时候，就会拉取到更新后的图像了
• 所以，我们确定了需要修改的文件分别是 服务端:serverindex.js、客户端:clientsignup.js、客户端:clientapp.html
• 我们先来更新 html 文件，在页面上增加一个上传图片的功能入口，这里我们分成两个操作：

1. 点击选择按钮，弹出本地文件浏览框之后，选择我们要的图片，然后点击确认，锁定我们要的图片
2. 点击上传图片，将我们锁定好的图片上传至服务器，显示上传的结果，客户端要做的事情了就到这里为止了

• 参考 vue.js官方手册

  
  Greet

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'

• 上面的代码，说明了在使用 vue.js 框架的时候，当你想要关联到 原生DOM事件 的时候，需要做两件事情，第一就是使用 vue.js模版语法 v-on: + 事件（比如 click、change 等等，即：v-on:click、v-on:change）= "方法名（在 js 文件里实现这个方法）"，来创建一个逻辑使 html文件 和 js文件 互相关联；第二件事就是运用（运用的意思就是需要知道这个东西的原理，然后结合场景去使用） 原生DOM事件，通过这个 原生DOM事件，html文件上发生的事件所包含的信息可以传递给 js文件，js文件得到这些信息后 就可以进行加工修改，然后再次渲染到 html文件上
• 首先先观察到关键词 event，google一下“event html”：

HTML事件是HTML元素发生的“事物”。

在HTML页面中使用JavaScript时，JavaScript可以对这些事件 做出“反应”。

• 举个栗子，比如我们编写出一个按钮，然后点击之后会显示“ArthurSlog”

My name is: 




 

• 上面的代码，其中事件（event）指的就是“点击按钮”这个动作，也就是“onclick”事件，当发生“onclick”事件的时候，会调用到display（）函数，从而执行display（）函数里面的逻辑，打印出 “ArthurSlog”，上面是没有使用 vue.js 框架时的语法，事件和函数的关联方式就是 onclick=“display()”，而使用 vue.js 框架时，我们需要配合 vue.js 框架使用 vue 的模版语法 “v-on”，所以上面的代码就会变成：

My name is: 

{{ txt }}


 

• 原来的 onclick=“display()” 变成了 v-on:onclick="display"
• 所以，我们的 html 文件更新为：

client/app.html

• 其中更新的部分如下：

client/app.html

    
Uploading {{ image }} files...
    

• 同时，我们需要更新客户端的 js文件
• 再次参考 vue.js官方手册

  
  Greet

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'

• 仔细观察，可以发现在 js文件 里，“alert(event.target.tagName)” 通过，这个语句，js文件获取到了 html文件里的一些信息，那么这些又是些什么信息呢？google一下“event.target.tagName”，找到 Event Object 的官方说明，可以理解为 event 的属性（Properties），其中发现我们在找的 target属性，官方解释如下：

Additional attributes
In addition to the common attributes shared by all  elements, inputs of type file also support:

files
A FileList object that lists every selected file. This list has no more than one member unless the multiple attribute is specified.

• 上面的话的意思是什么？首先我们知道 input 元素可以获取的类型有 值类型 和 文件类型，这两种类型拥有一些通用的属性，但是，当 input 获取的元素为 文件类型的时候，会拥有 文件类型特有的属性--文件集合属性（也就是我们要找的东西），其中，每个文件拥有的属性就是文件属性
• 结合上面对 vue.js 模版语法的分析 和 input元素、原生DOM事件（event）的了解，我们对客户端的 js文件 进行更新

client/js/signup.js

var host = 'http://127.0.0.1:3000/';

var signup_container = new Vue({
  el: '#signup-container',
  data: {
    name_signin: '',
    password_signin: '',
    name: '',
    password: '',
    repassword: '',
    firstname: '',
    lastname: '',
    birthday: '',
    sexs: ['male', 'female'],
    currentSex: 'male',
    ages: ['1', '2', '3', '4', '5', '6', '7', '8',
      '9', '10', '11', '12', '13', '14', '15', '16', '17', '18'],
    currentAge: '18',
    wechart: '',
    qq: '',
    email: '',
    contury: '',
    address: '',
    phone: '',
    websize: '',
    github: '',
    bio: '',
    commits: null,
    pagestate: '0',
    image: ''
  },
  methods: {
    filesChange: function(event) {
      this.image = event.target.files[0].name
    },
    return_index: function () {
      this.pagestate = '0'
    },
    signin_index: function () {
      this.pagestate = '1'
    },
    signup_index: function () {
      this.pagestate = '2'
    },
    signin: function () {
      //当点击登陆的时候，在页面上渲染从服务端返回的数据，把其他的部分隐藏掉
      this.pagestate = '3'

      var xhr = new XMLHttpRequest()

      var self = this
      xhr.open('GET', host + 'signin?' + 'name=' + self.name_signin + '&password=' + self.password_signin, true)

      xhr.onload = function () {
        //self.commits = xhr.responseText
        var myObj = JSON.parse(xhr.responseText);
        self.commits = myObj
      }

      xhr.send()
    },
    addUser: function () {
      //当点击注册的时候，在页面上渲染从服务端返回的数据，把其他的部分隐藏掉
      this.pagestate = '3'

      var xhr = new XMLHttpRequest()

      var self = this
      xhr.open('GET', host + 'signup?' + 'name=' + self.name + '&password=' + self.password + '&firstname=' +
        self.firstname + '&lastname=' + self.lastname + '&birthday=' + self.birthday
        + '&sex=' + self.currentSex + '&age=' + self.currentAge + '&wechart=' + self.wechart
        + '&qq=' + self.qq + '&email=' + self.email + '&contury=' + self.contury
        + '&address=' + self.address + '&phone=' + self.phone + '&websize=' + self.websize
        + '&github=' + self.github + '&bio=' + self.bio, true)

      xhr.onload = function () {
        self.commits = xhr.responseText
      }

      xhr.send()
    }
  }
})

• 更新的部分如下：

client/js/signup.js

filesChange: function(event) {
    this.image = event.target.files[0].name
}

• 现在，打开浏览器，输入 127.0.0.1:3000/app.html，点击 signin 按钮
• 输入账号：ArthurSlog 密码：ArthurSlog，点击登陆
• 成功登陆之后，点击 “选择文件” 按钮，选择一张你电脑里的图片，然后点击“打开”
• 此时，如果正常执行，你会看到 “Uploading 你选择的图片的名称 files...”
• 至此，我们完成了第一步 “1. 点击选择按钮，弹出本地文件浏览框之后，选择我们要的图片，然后点击确认，锁定我们要的图片”。

欢迎关注我的微信公众号 ArthurSlog

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

谢谢

今天关于《Slog43_支配vue框架初阶项目之博客网站-单页-载入要上传的图片》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！