如何在没有表单的情况下将图像上传到节点 js 服务器?

Posted

技术标签:

【中文标题】如何在没有表单的情况下将图像上传到节点 js 服务器?【英文标题】:How can i upload an image to a node js server without a form? 【发布时间】:2015-02-26 19:06:40 【问题描述】:

我有一个快速服务器正在运行,我想上传一张不带 html <form> 标签的图片 (<input type="file">)。这甚至可能吗?

当文件的值发生变化时,我使用这个函数从输入中获取文件:

function readImage (input) 
  var _URL = window.URL || window.webkitURL;
  if (input.files && input.files[0]) 
    var myImg = new Image();
    myImg.onload = function () 
      var img = 
        image: myImg.src,
        file: input.files[0],
        w: this.width,
        h: this.height
      ;
      return img;
    ;
    myImg.src = _URL.createObjectURL(input.files[0]);
  

【问题讨论】:

【参考方案1】:

您可以尝试FormData API。这是一个使用 jQuery 的示例:

var data = new FormData();
data.append('image', input.files[0]);

$.ajax(
  url: '/foo',
  data: data,
  contentType: false,
  processData: false,
  success: function(response) 
    alert('Image uploaded!');
  ,
  error: function(jqXHR, textStatus, errorMessage) 
    alert('Error uploading: ' + errorMessage);
  
);

【讨论】:

能否请您添加服务器端部分?我无法让它工作...... :( 解决了我的问题!我不仅附加了文件,还附加了一个像 key: "lorem", img: input.files[0] 这样的对象,并且文件没有出现在 req.files 中。谢谢你的帮助;)【参考方案2】:

客户端:

    var image = $("#imageid")[0].files[0];
    var formdata = new FormData();
    formdata.append('image', image);
    $.ajax(
        url: '/uploads/',
        data: formdata,
        contentType: false,
        processData: false,
        type: 'POST',
        'success':function(data)
            alert(data);
        
    );

服务器端: 使用 multer

    var express = require('express');
    var router = express.Router();
    var path   = require("path");
    var multer = require("multer");


    var uploading = multer(

        dest: './public/uploads/'

    );


    router.post('/', uploading.single('image'),function(req, res) 

        console.log(req.file);
        res.send(req.file);
    );

    module.exports = router;

输出: 服务器端:

 fieldname: 'image',
  originalname: 'Untitled.png',
  encoding: '7bit',
  mimetype: 'image/png',
  destination: './public/uploads/',
  filename: 'bde1b15ba5b62b4106f86b49c73720ea',
  path: './public/uploads/bde1b15ba5b62b4106f86b49c73720ea',
  size: 52375 

希望这会有所帮助!

【讨论】:

以上是关于如何在没有表单的情况下将图像上传到节点 js 服务器?的主要内容,如果未能解决你的问题,请参考以下文章

在不使用字符串的情况下将图像上传到android中的服务器

如何在不包含节点模块文件夹的情况下将我的 React 项目上传到 GitHub [重复]

如何在没有新服务器请求的情况下将下载的图像从父路由传递到子路由

如何在不丢失 exif 数据的情况下将 UIImage 转换为 JPEG?

如何在不公开 API 密钥的情况下发出 POST 请求?

如何在没有登录表单的情况下将摘要身份验证与 asp.net web api 和 angular js 一起使用?