AJAX(四)——用Ajax原生 , jQuery , Axios写文件上传

核心

• 核心1 : 获取文件 文件获取的时候记得是.files[0]
• 核心2 : 包装文件 , 获取了文件要用append添加到FormData
• 核心3 : 请求头
  
  不管是用原生写 , 还是jQuery , 还是Axios , 请求头都是这样

html部分

//html部分
<input type="file" id="file">
    <button>上传</button>
    <br>
    <img src="" alt="">

用原生写上传文件

原生js代码

//获取
var btn = document.querySelector('button');
var img = document.querySelector('img');
//点击上传按钮
btn.onclick = function() {
	//获取input中的文件 记得是在点击事件里面获取
    var file = document.querySelector('#file').files[0];
   //判断是否选择了文件
    if (file.length <= 0) {
        alert('请选择文件');
    } else {
    	//new一个FormData对象
        var fd = new FormData();
        //把文件添加到FormData里
        fd.append('photo', file[0]);
        //new一个 XMLHttpRequest
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar', true);
        xhr.send(fd);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var data = JSON.parse(xhr.responseText);
                if (data.status == 200) {
                    img.src = 'http://www.liulongbin.top:3006' + data.url;
                }
            }
        }
    }
}

用jQuery写上传文件

$("button").on("click", function() {
    //判断是否选择文件
    if ($("input").prop("files").length <= 0) {
        alert('请选择文件');
    } else {
    	//new一个FormData对象
        var fd = new FormData();
        //添加到FormData里面
        fd.append("img", $("input").prop("files")[0]);
        //ajax内容
        $.ajax({
            type: 'POST',
            url: 'http://www.liulongbin.top:3006/api/upload/avatar',
            data: fd,
            contentType: false,
            processData: false,
            async: true,
            success: function(data) {
                console.log(data);
                if (data.status == 200) {
                    console.log('成功');
                    $('img').attr('src', 'http://www.liulongbin.top:3006' + data.url)
                } else {
                    console.log('失败');
                }
            },
            error: function(xhr, status, error) {
                console.log(xhr);
                console.log(status);
                console.log(error);
            }
        })
    }
})

用Axios写上传文件

	//判断是否选择文件
	if(document.querySelector('input').files <= 0) {
		aleat('请选择文件')
	}
	//new一个FormData
    var fd = new FormData();
    //文件添加到FormData
    fd.append('photo', document.querySelector('input').files[0];
    axios({
        method: 'post',
        url: 'http://www.liulongbin.top:3006/api/upload/avatar',
        //下面这个请求头是重点
        headers: {
            'Content-Type': 'multipart/form-data;charset=UTF-8;boundary=' + new Date().getTime(),
        },
        data: fd,

    }).then(res => {
        console.log(res);
        console.log(res.data.url);
        document.querySelector('img').src = 'http://www.liulongbin.top:3006' + res.data.url;
    }).catch(err => {
        console.log('错误');
    })

显示进度条

// 创建 XHR 对象
var xhr = new XMLHttpRequest()
// 监听 xhr.upload 的 onprogress 事件
xhr.upload.onprogress = function(e) {
     // e.lengthComputable 是一个布尔值，表示当前上传的资源是否具有可计算的长度
     if (e.lengthComputable) {
         // e.loaded 已传输的字节
         // e.total 需传输的总字节
         var percentComplete = Math.ceil((e.loaded / e.total) * 100)
     }
 }
// 要在html上显示的话 , 就把percentComplete 添加进去