AJAX上传二进制文件。图片上传预览

陌巷偷客

已于 2022-05-25 18:44:29 修改

阅读量841

点赞数

分类专栏： AJAX 文章标签： ajax javascript 前端

于 2022-05-23 17:37:18 首次发布

本文链接：https://blog.csdn.net/m0_53881313/article/details/124930283

版权

AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我们经常会遇见需要上传图片的时候，比如我写这篇文章，展现代码效果就上传了结果的截图。

此时就遇到问题，之前单一的静态网页就不够用了。试试AJAX上传。做一个上传二进制文件，我文件为图片，并且上传之后加载可以预览。

AJAX上传二进制文件。图片上传预览

结果截图如下：

app.js里面的内容：ajax（接口）


//1.引入express框架
const express = require('express');
const formidable = require('formidable');
//2.创建一个对象
const app = express();
const formOptions = {
    //文件上传保存的地址
    uploadDir: './uploads',
    //保留文件的后缀名信息
    keepExtensions: true
}
const _form = formidable(formOptions);
//3.创建一个路由规则。（一个页面路径）
// app.get('/', function () {

// })
//配置网站静态资源目录
app.use(express.static('./public'));

//配置formidable
const options = formidable({
    uploadDir: './public/uploads',
    keepExtensions:true
})
const form = formidable(options);
//14 文件预览上传
app.all('/uploads', (req, res) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    let _imgurl;
    form.parse(req, (err, fileds, files) => {
        // _imgurl = files.avatar.newFilename;
        // console.log(files.avatar.filepath);
        res.send(JSON.stringify(files));
        // res.status(200).send(JSON.stringify);
    })
    // form.on('end', function () { 
    //     res.send(JSON.stringify({
    //         imgurl:_imgurl
    //     }));
    // })
})
app.get('/', (request, response) => {
    response.send('test');
});

 //4.设置运行端口，监听运行。
 //80   这个可以自己设置，下面自己设置一个端口8001
app.listen(8001, () => {
    console.log('服务端已启动,当前端口为:8001使用中....');
});

//5.启动服务  执行  在下面命令窗口输入node app.js  和自己起的名字一样

接着是html的内容：

里面引入了：bootstrap-v4，js,以及axios.

bootstrap-v4.为了写进度条，使用里面的小工具插件。

AJAX用的是axios请求。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap-v4/plugins/bootstrap-4.6.1-dist/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-8">
                <div class="form-group">
                    <input type="file" name="avatar" class="form-control-file" id="upload">
                </div>
            </div>
            <div class="col-md-2"></div>
        </div>
        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-8">
                <div class="progress">
                    <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated"
                        role="progressbar">
                    </div>
                </div>
            </div>
            <div class="col-md-2"></div>
        </div>
        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-8" id="imgpre"></div>
            <div class="col-md-2"></div>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="./bootstrap-v4/resource/js01.js"></script>
    <script src="./test/axios.min.js"></script>
    <script>
        //FormData上传文件

        let _upload = document.getElementById('upload');
        //
        _upload.onchange = function () {
            // 文件上传监听
            let _file = this.files[0];
            // console.log(_file[0])
            let _formdata = new FormData();
            _formdata.append('avatar', _file);
            axios({
                url: 'http://127.0.0.1:8001/uploads',
                method: 'POST',
                headers:{
                    'Content-Type':'multipart/form-data'
                },
                data: _formdata,
                onUploadProgress: function (ev) {
                    let _loaded = ev.loaded;
                    let _total = ev.total;
                    // console.log(_loaded, _total);
                    //上传比例
                    let _progress = parseInt((_loaded / _total) * 100) + '%';
                    let _progressBar = document.getElementById('progressBar');
                     _progressBar.style.width = _progress;
                     _progressBar.innerHTML = _progress;


            }
            }).then((res) => {
                // console.log(result)
                //  let _imgurl = res.data.avatar.filepath;
                //   console.log(_imgurl);
                 let _imgurl = res.data.avatar.filepath.split('public')[1];
                 _imgurl = 'http://127.0.0.1:8001' + _imgurl;
                 let _img = document.createElement('img');
                 _img.src = _imgurl;
                 _img.style.maxWidth = '100%';
                 document.getElementById('imgpre').appendChild(_img);
                //  console.log(_imgurl);
            }).catch((err) => {

            })
        }
    </script>
</body>

</html>

本篇代码用的“POST”请求。

’在进行Ajax开发时，经常使用GET方式或POST方式发送请求。