使用formdata上传文件并预览

沁若幽兰

于 2022-05-23 20:13:25 发布

阅读量255

点赞数

文章标签： css css3 html javascript

本文链接：https://blog.csdn.net/m0_58853021/article/details/124933362

版权

实现效果图：

css样式：

     *{
        margin: 0;
        padding: 0;
      }
      .content{
        width:600px;
        margin: 100px auto 0;
        display: flex;
        flex-direction: column;
        border: 2px solid rgb(217, 132, 67,.5);
        border-radius: 6px;
        padding-bottom: 30px;
      }
      #userimg {
        font-size: 20px;
        width: 500px;
        box-sizing: border-box;
        height: 36px;
        padding: 0 50px;
        outline: none;
        margin: 30px auto 10px;
        border-radius: 6px;
      }
      #imgpre{
        margin: 10px auto;
      }
      #imgpre>img{
        display: block;
      }

HTML 样式：运用bootstrap-v4，引入axios 利用formdata 实现二进制文件的上传

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="./plugins/bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <title>Document</title>
  </head>
  <body >
      <div class="content">
        <input type="file" name="userimg" id="userimg">
        <div class="progress">
          <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 0%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div  id="imgpre"></div>
      </div>
     
      <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
      <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
      <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
      <script src="./js/jquery.slim.min.js"></script>
      <script src="./js/popper.min.js"></script>
      <script src="./plugins/bootstrap-4.6.1-dist/js/bootstrap.bundle.min.js"></script>

      <!-- 引入axios -->
      <script src="./js/axios.min.js"></script>
      <script>
          let _userimg = document.getElementById('userimg');
          let _progressbar = document.getElementsByClassName('progress-bar')[0];
    
          // 当file输入框选择一个图片时
          _userimg.onchange = function () {
              // 获取上传的文件信息
              let _file = this.files[0];
              let _formdata = new FormData();
              _formdata.append('userimg', _file); // append('属性名' , '属性值');
  
              _progressbar.style.width = '0';
              //设置延迟时间函数
              setTimeout(function(){
                axios({
                  url: 'http://127.0.0.1:8001/uploads',
                  method: 'POST',
                  data: _formdata,
                  onUploadProgress:function(progressEvent){
                    // console.log(progressEvent);
                    // 上传文件已上传大小
                    let _loaded = progressEvent.loaded;
                    // 上传文件总大小
                    let _total = progressEvent.total;
                    // 已上传大小/总大小*100 已上传文件的进度百分比
                    let _percent = parseInt((_loaded / _total) * 100);

                    // 显示进度条
                    _progressbar.style.width = _percent + '%';
                  }
                }).then((res) => {
                  // console.log(res);
                  let _imgurl = res.data.userimg.filepath.split('public')[1];
                  _imgurl = 'http://127.0.0.1:8001' + _imgurl;
                  console.log(_imgurl);
                  let _img = document.createElement('img');
                   _img.src = _imgurl;
                  _img.style.maxWidth = '100%';
                  document.getElementById('imgpre').appendChild(_img);      
                })
              },1000);       
          }
      </script>
  </body>
</html>

three.js 配置ajax（异步通信）请求

//1、引入express 框架
const express = require('express');

//2 、引入formidable 插件
const formidable = require('formidable');

//3、创建对象
const app = express();

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

///5、配置formidable
const options = formidable({

  // 上传文件的目录
  uploadDir: './public/uploads',

  //保留上传文件的后缀名
  keepExtensions: true

});

const form = formidable(options);

// 6、创建一个路由规则（创建一个页面路径）
app.all('/uploads', (req, res) => {

 // 设置跨域请求
  res.setHeader('Access-Control-Allow-Origin', '*');

  form.parse(req, (err, fileds, files) => {   
    //设置响应体
    res.send(JSON.stringify(files));
  })


//设置运行端口、监听运行
app.listen(8001, () => {
    console.log('服务端已启动，当前端口 8001 使用中...')
});