原生JS使用input上传图片

 使用Jquery上传头像  new formData来完成file上传

   <form action="" id="forms">
         <h3>
              <span>头像</span>
              <a href="javascript:;">
                  <img src="../img/login/user.png" alt="" class="myimg">
                     <div class="change">
                       更换头像
                       <input type="file" name="logo" class="logo">
                     </div>
              </a>
           </h3>
    </form>

        $('.logo').change(function () {
            // console.log(1);
            // console.log($("#forms")[0]);
            $.ajax({
                url: 'http://localhost:5555/txy/uploadimg',
                type: 'post',
                data: new FormData($("#forms")[0]),
                dataType: 'json',
                headers: { //通过请求头将jwt数据发送到服务端
                    Authorization: localStorage.myjwt
                },
                // processData 处理数据
                processData: false, //设置jquery不处理表单数据
                contentType: false, //设置jquery不处理表单编码
                success(d) {
                    console.log(d);
                    if (d.status == 200) {
                        //将原有头像更换成最新头像
                        $(".myimg").attr('src', d.data.filePath);
                    }
                },
                error(e) {
                    console.log(e);
                }

            });
        });

    <!-- 
        注意：当表单中含有<input type="file">文件上传的表单项，则要把表单的编码设置为流媒体格式才能把用户选择的要上传的文件内容上传到服务器上
     -->
    <form enctype="multipart/form-data">
        <div>帐号：<input type="text" name="username"></div>
        <div>密码：<input type="password" name="password"></div>
        <div>密码：<input type="password" name="repassword"></div>
        <div>头像：<input accept=".gif,.png,.jpg,.jpeg" type="file"></div>
        <div><input type="submit" value="注册"></div>
    </form>

 默认情况下，enctype的值是application/x-www-form-urlencoded,不能用于文件上传，只有使用了multipart/form-data，才能完整的传递文件数据

利用blob上传图片

注意

1.响应类型  blob字节流  xhr.responseType = 'blob'

2.创建url对象 var url = window.URL   var blob =  new Blob([响应数据])

3.创建a标签设置herf属性    通过URL.createObjectURL(blob)可以获取当前文件的URL