XMLHttpRequest

介绍

XMLHttpRequest 对象用于在后台与服务器交换数据。

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
_pickPhoto(){
  ImagePicker.showImagePicker(options, (response) => {
    if (response.didCancel) {
      return;
    }else{
      let source = 'data:image/jpeg;base64,' + response.data;
      //本地演示
      // let user = this.state.user;
      // user.avatar = source;
      // this.setState({
      //   user: user
      // });
      //真实上传
      let timestamp = Date.now();
      let folder = 'avatar';
      let tags = 'app,avator';
      let accessToken = this.state.user.accessToken;
      fetch('http://rap.taobao.org/mockjs/13128/api/u/upload' , {
       method: 'POST',
       headers: {
         'Accept': 'application/json',
         'Content-Type': 'application/json',
       },
       body:
       JSON.stringify({
         accessToken:accessToken,
         timestamp:timestamp,
         folder:folder,
         tags:tags,
        })
      }).then((response) => response.json())
      .then((data)=>{
        var mockData = Mock.mock(data);
        if(mockData && mockData.success){
          let signature = 'folder=' + folder + '&timestamp=' + timestamp + CLOUDINARY.api_secret;
          signature = sha1(signature);
          let body = new FormData();
          body.append('folder',folder);
          body.append('api_key',CLOUDINARY.api_key);
          body.append('file',source);
          body.append('resource_type','image');
          body.append('signature',signature);
          body.append('timestamp',timestamp);
          let xhr = new XMLHttpRequest();
          this.setState({
            avatarUploading:true,
          })
          xhr.open('POST',CLOUDINARY.imgae);
          xhr.onload = ()=>{
            if(xhr.status == 200){
              try{
                response = JSON.parse(xhr.response)
              }
              catch(e){
                console.log(e);
              }
              if(response && response.public_id){
                let user = this.state.user;
                user.avatar = response.url;
                this.setState({
                  user:user,
                  avatarProgress:0,
                  avatarUploading:false,
                },function(){
                  AsyncStorage.setItem('user',JSON.stringify(user))
                })
              }
            }else{
              alert('请求失败');
              console.log(xhr.responseText);
            }
          }
          if(xhr.upload){
            xhr.upload.onprogress = (event)=>{
              if(event.lengthComputable){
                //lengthComputable表示一个进度信息是否可用的布尔值
                var percent = Number((event.loaded / event.total).toFixed(2))
                this.setState({
                  avatarProgress:percent,
                })
              }
            }
          }
          xhr.send(body);
        }
      }).catch((err)=>{console.log(err)})
    }
  });
}
【React Native】, XMLHttpRequest的一种使用