ajax实现二进制文件上传

1.用formData对象来保存二进制文件数据

2.将formData对象通过ajax上传给服务器

3.实时监听上传进度绘制进度条

4.将图片显示在页面中（服务器返回图片路径，客户端读取路径并显示图片）

 

代码中没有实现图片显示

前端代码

<div>
                <div class="form-group">
                    <label>请选择文件</label>
                    <input type="file" id="file" />
                </div>
                <div class="progress" style="width: 300px; height: 10px;background-color: #0000FE;">
                    <div class="progress-bar" style="height:100%; width: 0%; background-color: #00FF00;">0%</div>
                </div>
            </div>
            <script>
                // 获取文件选择空间
                var file = document.getElementById("file")
                // 获取进度条元素
                var pro = document.querySelector(\'.progress-bar\')
                file.onchange = function(){
                    // 创建空的formData对象
                    var formData = new FormData();
                    // 将用户选择的文件追加到formData表单对象中
                    formData.append(\'arrtName\',file.files[0])
                    // console.log(formData)
                    // 创建ajax对象
                    var xhr = new XMLHttpRequest();
                    // 对ajax对象进行配置
                    xhr.open(\'post\',\'http://localhost:3000/upload\')
                    // 在文件上传过程中持续触发
                    xhr.upload.onprogress = function(ev){
                        // ev.loaded 文件已经上传了多少
                        // ev.total 上传文件的总大小
                        var result = (ev.loaded/ev.total)*100 +\'%\'
                        pro.style.width = result;
                        pro.innerHTML = result;
                    }
                    xhr.send(formData)
                    // 监听响应
                    xhr.onload = function(){
                        if(xhr.status == 200){
                            console.log(xhr.responseText)
                        }
                    }
                }
            </script>

服务器端代码

const express = require(\'express\');
const path = require(\'path\');
// const bodyParser = require(\'body-parser\')
const formidable = require(\'formidable\')
const app = express()
app.all(\'*\', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://127.0.0.1:8848");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header(\'Access-Control-Allow-Headers\', \'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild\');
    res.header("X-Powered-By",\' 3.2.1\')
    res.header("Content-Type", "application/json;charset=utf-8");
    res.header("Access-Control-Allow-Credentials",true);
    next();
    });
app.post(\'/upload\',(req,res)=>{
    // 创建formidable表单解析对象
    const form = new formidable.IncomingForm();
    // 设置客户端上传文件的存储路径
    form.uploadDir = path.join(__dirname,\'uoload\')
    console.log(path.join(__dirname,\'upload\'))
    // 保留文件后缀
    form.keepExtensions = true;
    //解析formData对象
    form.parse(req,(err,fields,files)=>{
        res.send(files.arrtName.path)
    })
})
app.listen(3000);
console.log(\'app服务器启动成功\')