1、前端DOM:

  <section class="index-project-image-section" data-pro-code="">
    <div class="index-project-image-container">
      <h3>款号图片</h3>
      <form id="index-project-image-upload">
        <span>上传图片:</span>
        <input type="file" name="file" id="image-file" accept="image/jpeg,image/png,image/jpg">
        <div class="index-project-image-show">
          <img id="image-show" src="" alt="">
          <p>没有图片,请点击上方按钮上传!</p>
        </div>
        <div class="index-project-image-btn">
          <button type="button">取消</button>
          <button type="submit">确认上传</button>
        </div>
      </form>
    </div>
  </section>

2、前端JS:

$('#index-project-image-upload').on('submit',function(e){
        e.preventDefault();
        if($('#image-file')[0].files[0] === undefined){
            alert('请选择图片文件!')
            return;
        }
        var formData = new FormData(this); 
        formData.append('proCode',$('.index-project-image-section').attr('data-pro-code'))
        $.ajax({
            url:'yourUrl',
            type:'yourType',
            data:formData,
            contentType: false,
            processData: false,
            success:function(res){
               if(res.code==200){
                var userResponse = confirm(res.text);
                if(userResponse){
                    window.location.reload()
                }else{
                    window.location.reload()
                }
               }else{
                alert(res.text)
               }
            },
            error:function(err){
                alert(err.status+':'+err.statusText)
            }
        })
    })

3、Node后端:

// 引入multer包
const multer = require('multer'); 

// 实例化multer
const upload = multer();

// 在接受文件的路由上,配置multer中间件
router.post('/yourUrl',upload.any(),function(req,res,next){
    // 获取第一个文件
    var file = req.files[0];

    // 获取文件名称
    var fileName = file.originalname;

    // 获取文件尾缀(类型)
    var fileExt = fileName.split('.').pop();

    // 获取文件内容
    var file_content = file.buffer;

    // 其他的逻辑......

})

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注