JS结合七牛实现上传头像的效果

1    拿7牛的token

  通过后台的接口拿到7牛的token;

2 7牛的域名， 后面要和7牛返回的路径 结合。

var addr = 'http://opf2ucy0n.bkt.clouddn.com/'

3 创建file 和 formData

var file = event.target.files[0];

var formData = new FormData();
              formData.append('file', file);

formData.append('token', qiniutoke);    //qiniutoke是1步骤里面后台拿到的token

4 掉7牛接口

$.ajax({
                    url: 'http://up-z1.qiniu.com/',
                    type: 'POST',
                    dataType: 'json',
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false
                }).done((res) => {
                    imageUrl= addr+res.key
console.log(’上传成功‘);
                }).fail(function(err) {
                    console.log(err);
                });   

//   url为7牛的路径, imageUrl为2步骤的路径加7牛返回来的路径结合。

5 最后页面输出imageUrl即可。