zoukankan      html  css  js  c++  java
  • 表单上传文件,后台通过formidable处理上传文件

    使用表单上传文件

    1. 通过表单上传文件

      <form class="form-horizontal" role="form"
          enctype="multipart/form-data" method="POST"
          action="/contest/vacation-photo/{{year}}/{{month}}">
        <div class="form-group">
          <label for="fieldName" class="col-sm-2 control-label">Name</label>
          <div class="col-sm-4">
              <input type="text" class="form-control"
              id="fieldName" name="name">
          </div>
        </div>
        <div class="form-group">
           <label for="fieldEmail" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-4">
                <input type="email" class="form-control" required
                  id="fieldEmail" name="email">
            </div>
        </div>
        <div class="form-group">
            <label for="fieldPhoto" class="col-sm-2 control-label">Vacation photo
            </label>
            <div class="col-sm-4">
                <input type="file" class="form-control" required accept="image/*"
                  id="fieldPhoto" name="photo">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-4">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
      </form>
      

      必须指定:enctype="multipart/form-data" 来告诉浏览器要上传文件

    如何上传图片

    <input type="file" required accept="image/*" name="photo">
    
    • type: 规定输入框类型
    • accept: 规定通过文件上传上传的文件类型 "image/*"表示上传图片类型--但是我上传docx文档也不会报错的呀
    • name: 发送请求时传给服务器的字段

    后台通过formidable处理上传文件

    var formidable = require('formidable')
    
    ...
    
    // year和month是怎么渲染的
    app.post('/contest/vacation-photo/:year/:month', (req, res) => {
      var now = Date.now()
    
      var form = new formidable.IncomingForm({
        multiples: true,
        // 3.设置上传文件的存储目录
        // uploadDir: __dirname +  '/public/imgs'
      })
    
      // 2.设置编码:如果有普通键值对数据就最好设置
      // form.encoding = 'utf-8'
    
      // 3.设置上传文件的存储目录  -- 之前把路径写成  __dirname +  'public/imgs'  老报错Emmit
      form.uploadDir =  __dirname +  '/public/imgs'
    
      // 4.设置是否保留文件的扩展名 --若不保留文件的额扩展名,在服务端保存的就是只有文件名没有扩展名的未知文件,
           // 如图片:upload_5bb718ac0c1ec3bb318742bcd102a151
      form.keepExtensions = true
    
      form.parse(req, function(err, fields, files){
        if(err) return res.redirect(303, '/html/error.html');
        console.log('received fields:');
        console.log(fields);   // { name: '张三丰', email: 'dianziyouxiang@163.com' }
        console.log('received files:');
        console.log(files);   // 上传的图片对象
        res.json({ fields, files })
        // res.redirect(303, '/html/thank-you.html');
      })
    })
    
  • 相关阅读:
    机器学习算法(SVM)公开课4月25日开讲
    手把手教你做文本挖掘
    ActiveReports公开课开启报名,学习如何解决中国式复杂报表难题
    DevExpress免费公开课,讲解即将发布的16.2新版功能
    Stimulsoft入门视频
    免费公开课,讲解强大的文档集成组件Aspose,现在可报名
    中国式商业智能报表ActiveReports免费公开课,10月20日开讲
    JavaScript图表FusionCharts免费在线公开课,由印度原厂技术工程师主讲,10月13日发车
    LoadRunner免费公开课,惠普金牌讲师亲授
    DevExpress VCL v16.1.3发布
  • 原文地址:https://www.cnblogs.com/tina-12138/p/13291463.html
Copyright © 2011-2022 走看看