FromData文件上传即使预览

在图片上传到服务器以后，服务器通常会将图片地址作为响应数据传递到客户端，客户端可以从相应数据中获取图片的地址，然后将图片显示在页面上

页面

 // 监听服务器端响应给客户端的数据
            xhr.onload = function() {
                // 如果服务器端返回的http码类型为200
                // 说明请求成功
                if (xhr.status == 200) {
                    // 将服务器端返回的数据显示在控制台中
                    // console.log(xhr.responseText);
                    // 拿到的是json字符串，将它转换为json对象
                    var result = JSON.parse(xhr.responseText);
                    // 动态创建img表单
                    var img = document.createElement('img');
                    // 给图片标签设置src属性
                    img.src = result.path;
                    // 等图片加载完后添加图片到表单中
                    img.onload = function() {
                        // 将图片显示在页面中
                        // appendChild追加
                        box.appendChild(img);
                    }
                }
            }

Js

// 实现文件上传路由
app.post('/upload', (req, res) => {
    // 创建formidable表单解析对象
    const form = new formidable.IncomingForm();
    // 需要引入path模块，进行设置绝对路径
    // 设置客户端上传文件的存储路径
    // __dirname绝对路径
    // uploads文件上传的地址
    form.uploadDir = path.join(__dirname, 'public', 'uploads');
    //  保留上传文件的后缀名
    form.keepExtensions = true;
    // 解析客户端传递过来的FromData对象
    // 解析客户端传递过来的FormData对象
    // 第一个参数错误对象
    // 第二个参数保存了表单中的普通请求参数
    // 第三个参数保存了文件上传的请求信息
    form.parse(req, (err, fields, files) => {
        // 将客户端传递过来的文件地址响应到客户端
        // split分隔转换为数组
        // res.send(files.attrName.path)返回地址C:\Users\123\Desktop\html\Ajax\day02\server\public\uploads\upload_2091bbae616132a765239134499975f0.mp4      对地址进行分割为数组以public为分割线
        res.send({
            path: files.attrName.path.split('public')[1]
        });
 

        // res.send('ok');
    })
})