1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

const p = () => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest() // 创建XMLHttpRequest对象

// 异步ajax，监听readystatechange事件，设置回调函数
    xhr.onreadystatechange = () => { // 状态发生变化时，函数被回调
      if (xhr.readyState === 4) { // 成功完成
        // 判断响应状态码
        if (xhr.status !== 200) return reject(xhr.status) // 失败，根据响应码判断失败原因:
        return resolve(xhr.responseText) // 成功，通过responseText拿到响应的文本:
      } else {
        // HTTP请求还在继续...
      }
    }

    // 发送请求:
    xhr.open('GET', '/api/categories')
    xhr.setRequestHeader('Content-Type', 'application/json') // 设置请求头
    xhr.send() // 到这一步，请求才正式发出

  })
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

// 不带参数的请求
$(() => {
  $('button1').on('click', () => {
    $.get('http://www.liulongbin.top:3006/api/getbooks', (res) => {
      console.log(res)
    })
  })
})
// 带参数的请求 // http://www.liulongbin.top:3006/api/getbooks?id=1
$(() => {
  $('button2').on('click', () => {
    $.get('http://www.liulongbin.top:3006/api/getbooks', /* 第二个参数为参数对象 */{id: 1}, (res) => {
      console.log(res)
    })
  })
})
// 提交数据的请求
// $.post 功能单一，仅发起post请求向服务器提交数据
// $post(url, [data /*可选 要提交的数据*/], [callback /* 数据提交成功的回调*/])
$(() => {
  $('button3').on('click', () => {
    $.post('http://www.liulongbin.top:3006/api/addbook',
      /* 第二个参数为提交的数据对象 */{
        bookname: '水浒传',
        author: '施耐庵',
        publisher: '上海图书出版社'
      },
      (res) => {
        console.log(res)
      })
  })
})
/*
// 综合配置
$.ajax({
    type: '', // 请求的方式
    url: '', // 请求的 URL 地址
    data: {}, // 此次请求要携带的数据
    success: (res) => {}, // 请求成功后的回调函数
})
*/
// Get
$(() => {
  $('button4').on('click', () => {
    $.ajax({
      type: 'GET',
      url: 'http://www.liulongbin.top:3006/api/getbooks',
      params: {id: 3},
      success: (res) => {
        console.log(res)
      }
    })
  })
})
// Post
$(() => {
  $('button4').on('click', () => {
    $.ajax({
      type: 'POST',
      url: 'http://www.liulongbin.top:3006/api/addbook',
      data: {
        bookname: '三国演义',
        author: '罗贯中',
        publisher: '重庆图书出版社'
      },
      success: (res) => {
        console.log(res)
      }
    })
  })
})

1
2

yarn add axios
# pnpm add axios

1

import axios from 'axios';

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

import axios from 'axios'

// 直接发起不带参数的请求
axios.get('/api/getbooks',
  {
    baseURL: 'http://www.liulongbin.top:3006/',
    timeout: 1000
  })
  .then(
    (res) => {
      const {data, status} = res
      console.log('直接发起不带参数的请求')
      console.log('data', data)
      console.log('status', status)
      console.log('-----------------')
    }
  )

// 先配置，后发起请求
const instance = axios.create({
  baseURL: 'http://www.liulongbin.top:3006/',
  timeout: 1000
})

const instance2 = axios.create({
  baseURL: 'http://www.liulongbin.top:3006/',
  timeout: 1000,
  params: {
    id: 1
  }
})

instance.get('/api/getbooks')
  .then(
    (res) => {
      const {data, status} = res
      console.log('// 先配置，后发起不带参请求')
      console.log('data', data)
      console.log('status', status)
      console.log('-----------------')
    }
  )

instance2.get('/api/getbooks')
  .then(
    (res) => {
      const {data, status} = res
      console.log('// 先配置，后发起带参请求')
      console.log('data', data)
      console.log('status', status)
      console.log('-----------------')
    }
  )

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// pnpm add node-fetch // 在Node环境中使用 Fetch API 安装 pnpm add node-fetch
import fetch, {Headers} from 'node-fetch'

const myHeaders = new Headers()
myHeaders.append('User-Agent', 'apifox/1.0.0 (https://www.apifox.cn)')

const requestOptions = {
  method: 'GET',
  headers: myHeaders,
  redirect: 'follow'
}

/*
fetch('http://www.liulongbin.top:3006/api/getbooks', requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error))
*/

const response = await fetch('http://www.liulongbin.top:3006/api/getbooks', requestOptions)
const {data} = await response.json()
console.log(data)

const response2 = await fetch('https://api.github.com/users/github', requestOptions)
const data2 = await response2.json()
console.log(data2)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

import axios from 'axios'
// 直接发起
axios.post('/api/addbook',
  {
    bookname: '金瓶梅',
    author: '兰陵笑笑生',
    publisher: '上海图书出版社'
  },
  {
    baseURL: 'http://www.liulongbin.top:3006/',
    timeout: 1000
  }
).then(res => {
  const {data} = res
  console.log(data)
})
  .catch(err => {
    console.log(err)
  })
/* 不允许重复添加 */

// 先配置，后发起请求
const instance = axios.create({
  baseURL: 'http://www.liulongbin.top:3006/',
  timeout: 1000
})

instance.post('/api/addbook',
  {
    bookname: '三国演义',
    author: '罗贯中',
    publisher: '重庆图书出版社'
  })
  .then(
    (res) => {
      const {data, status} = res
      console.log('// 先配置，后发起不带参请求')
      console.log('data', data)
      console.log('status', status)
      console.log('-----------------')
    }
  )
  .catch(err => {
    console.log(err)
  })

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

import axios from 'axios'
// 默认Get 读取全部数据
axios('http://www.liulongbin.top:3006/api/getbooks')
  .then((res) => {
    const {data: dataObject} = res
    console.log('默认Get 读取全部数据')
    console.log('dataObject.data: ', dataObject.data)
    console.log('--------------')
  })
// 配置选项，读取全部数据
axios({
  method: 'GET',
  url: 'http://www.liulongbin.top:3006/api/getbooks'
})
  .then((res) => {
    const {data: dataObject} = res
    console.log('配置选项，读取全部数据')
    console.log('dataObject.data: ', dataObject.data)
    console.log('--------------')
  })
// 配置params选项，读取部分数据
axios({
  method: 'GET',
  url: 'http://www.liulongbin.top:3006/api/getbooks',
  params: {id: 2}
})
  .then((res) => {
    const {data: dataObject} = res
    console.log('配置params选项，读取部分数据')
    console.log('dataObject: ', dataObject)
    console.log('--------------')
  })

// 发起提交请求
axios({
  method: 'POST',
  url: 'http://www.liulongbin.top:3006/api/addbook',
  data: {
    bookname: '哈利波特',
    author: 'JK罗琳',
    publisher: '上海译文图书出版社'
  }
})
  .then((res) => {
    const {data: dataObject} = res
    console.log('发起提交请求')
    console.log('dataObject: ', dataObject)
    console.log('--------------')
  })

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<template>
  <div class="books-info-demo">
    <!-- 添加图书的Panel面板 -->
    <AddBookInfo></AddBookInfo>

    <!-- 展示图书的表格 -->
    <ShowBookInfo></ShowBookInfo>
  </div>
</template>

<script lang="ts">
import AddBookInfo from '@/components/ajax-demo/book-demo/AddBookInfo.vue';
import ShowBookInfo from '@/components/ajax-demo/book-demo/ShowBookInfo.vue';
import {defineComponent, provide, reactive} from '@vue/composition-api';
import Vue from 'vue';

export default defineComponent({
  name: "BooksInfo",
  components: {
    AddBookInfo,
    ShowBookInfo
  },
  props: {},
  setup() {
    const eventbus = reactive(new Vue());
    provide<Vue>('eventbus', eventbus);
    return {
      eventbus
    }
  }
});
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

<template>
  <div class="add-book card">
    <div class="card-header">
      <h3 class="card-title">添加新图书</h3>
    </div>
    <div class="card-body form-inline">
      <VueInput labelName="书名"
                class="form-control"
                ref="iptBookname"
                placeholder="请输入书名"
                v-model="msgBook"/>
      <VueInput labelName="作者"
                class="form-control"
                ref="iptAuthor"
                placeholder="请输入作者"
                v-model="msgAuthor"/>
      <VueInput labelName="出版社"
                class="form-control"
                ref="iptPublisher"
                placeholder="请输入出版社"
                v-model="msgPublisher"/>
      <VueButton @click="addBookInfo"
                 ref="btnAdd">添加
      </VueButton>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import {defineComponent, ref, inject, Ref} from '@vue/composition-api';
import VueButton from '@/components/button/VueButton.vue';
import VueInput from '@/components/input/VueInput.vue';
import {addBook} from '@/components/ajax-demo/http-request/addbook';

export default defineComponent({
  name: 'AddBookInfo',
  props: {},
  components: {
    VueButton,
    VueInput
  },
  setup(props, ctx) {
    const eventbus = inject<Vue>('eventbus');

    const msgBook = ref('');
    const msgAuthor = ref('');
    const msgPublisher = ref('');

    const addBookInfo = () => {
      msgBook.value = (ctx.refs.iptBookname as unknown as Ref<string>).value.trim();
      msgAuthor.value = (ctx.refs.iptAuthor as unknown as Ref<string>).value.trim();
      msgPublisher.value = (ctx.refs.iptPublisher as unknown as Ref<string>).value.trim();
      if (msgBook.value.length * msgAuthor.value.length * msgPublisher.value.length === 0) {return alert('请填写完整的图书信息！');}

      // 发送添加书本信息请求
      addBook({
        bookname: msgBook.value,
        author: msgAuthor.value,
        publisher: msgPublisher.value
      })
        .then(res => {
          const {data} = res;
          if (data.status === 502) {return alert(data.msg);}
          alert(data.msg);
          // 通知兄弟组件 ShowBookInfo.vue 更新渲染图书列表
          eventbus?.$emit('renderBookList');
        });

    };

    return {
      msgBook,
      msgAuthor,
      msgPublisher,
      addBookInfo
    };
  }
});
</script>

<style lang="scss" scoped>
...
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

<template>
  <table class="table table-bordered table-striped">
    <thead>
    <tr>
      <th scope="col">Id</th>
      <th scope="col">书名</th>
      <th scope="col">作者</th>
      <th scope="col">出版社</th>
      <th scope="col">操作</th>
    </tr>
    </thead>
    <tbody id="tb" @click="handleClick">
    <tr v-for="{id, bookname, author, publisher} in rowsData" :key="id">
      <th scope="row">{{ id }}</th>
      <td>{{ bookname }}</td>
      <td>{{ author }}</td>
      <td>{{ publisher }}</td>
      <td>
        <a href="javascript:null;"
           class="del"
           :data-id="id">删除</a>
      </td>
    </tr>
    </tbody>
  </table>

</template>

<script lang="ts">
import {defineComponent, ref, inject} from '@vue/composition-api';
import {getBookList} from '@/components/ajax-demo/http-request/getBookList';
import {delBook} from '@/components/ajax-demo/http-request/delBook';

export default defineComponent({
  name: 'ShowBookInfo',
  setup() {
    const eventbus = inject<Vue>('eventbus');

    const rowsData = ref<string[]>(['']);
    const getBookInfo = () => {
      getBookList()
        .then(res => {
          if (res.status === 200) {
            const {data} = res.data;
            rowsData.value = data;
          }
        })
        .catch(err => {
          return `获取数据失败！${err.message}`;
        });
    };
    getBookInfo();

    // 通过代理的方式为动态添加的元素绑定点击事件 删除图书
    const handleClick = (e: MouseEvent) => {
      if (Object.keys((e?.target as HTMLElement).dataset).includes('id')) {
        const bookId = (e?.target as HTMLElement).dataset.id;
        (bookId && (+bookId) <= 3)
          ? alert('请勿删除原始数据')
          : bookId && delBook(
          {id: bookId}
        )
          .then(res => {
            if (res.status === 200) {
              // const {data} = res.data;
              getBookInfo();
              return '删除图书成功！';
            }
          })
          .catch(err => {
            return `删除图书失败！${err.message}`;
          });
      }
    };

    eventbus?.$on('renderBookList', () => {
      getBookInfo();
    });

    return {
      rowsData,
      getBookInfo,
      handleClick
    };
  }
});
</script>

<style lang="scss" scoped>
...
</style>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import axios from 'axios';

export const addBook = (paramsData: Record<string, string>) => {
  // 发送添加书本信息请求
  return axios.post('/api/addbook',
    paramsData,
    {
      baseURL: 'http://www.liulongbin.top:3006/',
      timeout: 0
    }
  );
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import axios from 'axios';

export const delBook = (paramsData: Record<string, string>) => {
  return axios.get(
    '/api/delbook',
    {
      baseURL: 'http://www.liulongbin.top:3006',
      params: paramsData
    });
};

1
2
3
4
5
6
7
8
9

import axios from 'axios';

export const getBookList = () => {
  return axios.get(
    '/api/getbooks',
    {
      baseURL: 'http://www.liulongbin.top:3006'
    });
};

1
2
3
4
5
6
7
8
9

<form action="">
  <label for="info">Enter info: </label>
  <input id="info" name="info" type="text"/>
  <label for="password">Enter password: </label>
  <input id="password" name="password" type="text"/>
  <input id="checkbox" name="checkbox" type="text"/>
  <label for="checkbox">记住我</label>
  <button type="submit">提交</button>
</form>

1
2
3
4
5
6
7
8

const xhr = XMLHttpRequest()
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
xhr.onreadystatechange = () => {
    if(xhr.readystate === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
    }
}
xhr.send()

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

const xhr = XMLHttpRequest()

// 查询查询字符串 ?id=1
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1')


xhr.onreadystatechange = () => {
    if(xhr.readystate === 4 && xhr.status === 200) {
        console.log(xhr.responseText)
    }
}
xhr.send()

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

export const getBook = (id: number, bookname?: string) => {
  return axios.get(
    '/api/getbooks',
    {
      params : {
        id: `${id}`,
        bookname: bookname
      }
    });
};

getBook(1, '西游记');

1
2
3
4
5
6
7
8
9

{
  name: "zd",
  'age': 20,
  "gender": 'female',
  "address": undefined,
  "hobby": ["美食", "睡觉", '追剧'],
  // 错误的示范
  "say": function() {},
}

1
2
3
4
5
6
7
8

{
  "name": "zd",
  "age": 20,
  "gender": "female",
  "address": null,
  "hobby": ["美食", "睡觉", "追剧"],
  "isMarried": false
}

1

["js", "ts", "go"]

1

[100, 200, 300.5]

1

[{"name": "zs", "age": 20}, {"name": "ls", "age": 30}]

1

[["苹果", "榴莲", "椰子"], [4, 10, 5]]

1
2

 const obj = JSON.parse('{"a": "Hello", "b": "World"}')
 // {a: 'Hello', b: 'World'}

1
2

 const obj = JSON.stringify({a: 'Hello', b: 'World'})
 // '{"a": "Hello", "b": "World"}'

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks')
xhr.onreadystatechange = () => {
  if(xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText)
    console.log(typeof xhr.responseText)
    const result = JSON.parse(xhr.responseText)
    console.log(typeof result) // object
  }
}
xhr.send()

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// node 环境 // import {XMLHttpRequest} from 'xmlhttprequest'
function resolveData(data) {
  const arr = []
  for(let k in data) {
    arr.push(`${k}=${data[k]}`) // data[k] 注意 变量名属性
  }
  return arr.join('&')
}

const reqMap = {
  'GET': () => {
    xhr.open(method, `${url}?${qs}`)
    xhr.send()
  },
  'POST': () => {
    xhr.open(method, url)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send(qs)
  },
  'PUT': () => {},
  'DELETE': () => {},
  'HEAD': () => {},
  'OPTION': () => {},
}
  
export function myAjax(options) {
  const {method, url, data, successCb} = options
  const xhr = new XMLHttpRequest()
  // 拼接查询字符串
  const qs = resolveData(data)
  
  // 监听请求状态改变事件
  xhr.onreadystatechange = () => {
    if(xhr.readyState === 4 && xhr.status === 200) {
      const res_JSONObj = JSON.parse(xhr.responseText /* xhr.responseText JSONString*/)
      successCb(res_JSONObj)
    }
  }

  reqMap[`${method.toUpperCase()}`]()

}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import {myAjax} from './myAjax.js'

myAjax({
  method: 'GET',
  url: 'http://www.liulongbin.top:3006/api/getbooks',
  data: {
    id: 1
  },
  successCb: (res) => {
    console.log(res)
  }
})

myAjax({
  method: 'POST',
  url: 'http://www.liulongbin.top:3006/api/addbook',
  data: {
    bookname: '红宝书',
    author: '红宝书',
    publisher: '红宝书',
  },
  successCb: (res) => {
    console.log(res)
  }
})

1
2
3
4
5

<form id="form1">
  <input type="text" name="uname" autocomplete="off"/>
  <input type="password" name="upwd" autocomplete="off"/>
  <button type="submit">提交</button>
</form>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

...
<body>
  <form id="form1">
    <input type="text" name="uname" autocomplete="off" />
    <input type="password" name="upwd" />
    <button type="submit">提交</button>
  </form>

  <script>
    // 1. 通过 DOM 操作，获取到 form 表单元素
    const form = document.querySelector('#form1')

    form.addEventListener('submit', function (e) {
      // 阻止表单的默认提交行为
      e.preventDefault()

      // 创建 FormData，快速获取到 form 表单中的数据
      const fd = new FormData(form)

      const xhr = new XMLHttpRequest()
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata')
      xhr.send(fd)

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(JSON.parse(xhr.responseText))
        }
      }
    })
  </script>

</body>
...

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

<template>
  <div>
    <form ref="form1">
      <VueInput type="text"
                labelName="uname"
                titleName="注册名:"
                autocomplete="off"/>
      <VueInput type="password"
                labelName="upwd"
                titleName="密码:"
                autocomplete="off"/>
      <VueButton @click="onSubmit">提交</VueButton>
      {{ data }}
    </form>
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, ref, reactive} from '@vue/composition-api';
import VueInput from '@/components/input/VueInput.vue';
import VueButton from '@/components/button/VueButton.vue';

export default defineComponent({
  name: 'FormData',
  components: {VueButton, VueInput},
  props: {},
  setup(props, ctx) {
    const resData = ref<Record<string, unknown>>({});
    const data = ref<Record<string, unknown>>({});
    let form: HTMLFormElement = ctx.refs.form1 as HTMLFormElement;
    // 根据 form 表单创建 FormData 对象，会自动将表单数据填充到 FormData 对象中
    // 无需手动 调用 .append 方法
    let formData: FormData = reactive(new FormData(form));

    const onSubmit = (/*, e: Event*/) => {
      // e.preventDefault(); // 使用 Ajax 的形式提交表单 避险阻止默认提交行为
      formData = new FormData(form);

      // 无需设置 `xhr.setHeader` 的数据类型
      const xhr = new XMLHttpRequest();
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/formdata');

      xhr.onreadystatechange = () => {
        if (xhr.readyState == 4 && xhr.status == 200) {
          resData.value = JSON.parse(xhr.responseText);
          (data.value as unknown) = resData.value.data;
        }
      };

      xhr.send(formData);

    };

    onMounted(() => {
      form = ctx.refs.form1 as HTMLFormElement;
      // 根据 form 表单创建 FormData 对象，会自动将表单数据填充到 FormData 对象中
      // 无需手动 调用 .append 方法
      formData = new FormData(form);
    });

    return {
      resData,
      onSubmit,
      formData,
      form,
      data
    };
  }
});
</script>

1
2
3
4
5
6

<!-- 1. 文件选择框 -->
<input type="file" id="file1"/>
<!-- 2. 上传按钮 -->
<button id="btnUpload">上传文件<button/>
<!-- 3. 向服务器发起请求图片，并显示-->
<img src="" alt="" ref="img" width="800">

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 1. 获取上传文件按钮
const btnUpload = document.querySelector('#btnUpload')

// 2. 为按钮添加点击事件监听
btnUpload.addEventListener('click',() => {
// 3. 获取选择的文件列表
  const files = document.querySelector('#file1').files
  if(files.length <= 0) {return alert('请选择要上传的文件！')}
// 上传后续的业务逻辑
})

1
2
3
4

// 1. 创建 FormData 对象
const fd = new FormData()
// 2. 向 FormData 中追加文件
fd.append('avatar', files[0])

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// 1. 创建 xhr 对象
const xhr = new XMLHttpRequest()
// 2. 调用 open 函数，指定请求类型与 URL 地址，上传文件的请求类型必须为 POST
xhr.open('POST', 'http://www.lilongbin.top:3006/api/upload.avtar')
// 3. 监听 `onreadystatechange` 事件
xhr.onreadystatechange = () => {
  if(xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText)
    data.status === 200
      ? document.querySelector('#img').src = `http://www.lilongbin.top:3006${data.url}`
      : console.log(data.message);
  }
}
// 4. 发起请求
xhr.send(fd)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<template>
  <div>
    <VueInput type="file" ref="file1"/>
    <VueButton ref="btnUpload"
               @click="uploadFile">上传图片
    </VueButton>
    <br/>
    <img src="" alt="" ref="img" width="800">
  </div>
</template>

<script lang="ts">
import VueButton from '@/components/button/VueButton.vue';
import VueInput from '@/components/input/VueInput.vue';
import {defineComponent} from '@vue/composition-api';
import Vue, {VNode} from 'vue';

export default defineComponent({
  name: 'Upload',
  components: {VueInput, VueButton},
  props: {},
  setup(props, ctx) {
    const uploadFile = () => {
      const files = (ctx.refs.file1 as Vue).$el.querySelector('input')?.files;
      if (files && files.length <= 0) {return alert('请选择要上传的文件');}
    };

    return {
      uploadFile
    };
  }
});
</script>

1
2
3

-> percentComplete 39
-> percentComplete 78
-> percentComplete 100

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

<template>
  <div>
    <VueInput type="file" ref="file1"/>
    <VueButton ref="btnUpload"
               @click="uploadFile">上传图片
    </VueButton>
    <div style="">
      <label for="file">文件上传进度:
        <progress id="file" max="100" :value="`${percentComplete}`"
                  style="vertical-align: text-bottom;width: 30%;margin: 0 10px;"></progress>
        <span>{{ progressTips }}</span>
      </label>
    </div>
    <br/>
    <img src="" alt="" ref="img" width="800">
  </div>
</template>

<script lang="ts">
import VueButton from '@/components/button/VueButton.vue';
import VueInput from '@/components/input/VueInput.vue';
import {computed, defineComponent, inject, ref} from '@vue/composition-api';
import Vue from 'vue';

export default defineComponent({
  name: 'Upload',
  components: {VueInput, VueButton},
  props: {},
  setup: function (props, ctx) {
    // 动态进度条数值
    const percentComplete = ref<number>(0);
    // 进度条提示文字
    const progressTips = computed(() => {
      return percentComplete.value === 100
        ? '上传完成'
        : `${percentComplete.value}%`;
    });

    const toast = inject<Function>('toast');
    const uploadFile = () => {
      // 获取用户选择的文件列表
      const fileList = (ctx.refs.file1 as Vue).$el.querySelector('input')?.files;
      if (fileList && fileList.length <= 0) {return toast && toast('请选择要上传的文件！');}
      const fd = new FormData();
      // 将用户选择的文件添加到 FormData 中
      fileList && fd.append('avatar', fileList[0]);

      // 创建 xhr 对象
      const xhr = new XMLHttpRequest();

      // 监听文件上传的进度
      xhr.upload.onprogress = (e) => {
        if (e.lengthComputable) {
          // 计算出上传的进度 动态设置进度条
          percentComplete.value = Math.ceil((e.loaded / e.total) * 100);
        }
      };

      // 调用 open 函数，指定请求类型与 URL 地址，上传文件的请求类型必须为 POST
      xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar');

      // 监听 `onreadystatechange` 事件
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
          const data = JSON.parse(xhr.responseText);
          data.status === 200
            ? (ctx.refs.img as HTMLImageElement).src = `http://www.liulongbin.top:3006${data.url}`
            : toast && toast(data.message);
        }
      };

      // 发起请求
      xhr.send(fd);
    };

    return {
      uploadFile,
      percentComplete,
      progressTips
    };
  }
});
</script>