两种主流上传图片的方法：jQuery+Multer || 原生JS

cnTomato 发布于2019-08-21 11:41 / 1518人阅读

摘要：原文首发博主经过实践，这里给出两种处理用户上传图片的方法，前后端代码皆有前端后端的中间件提交告诉不要去处理发送的数据告诉不要去设置请求头后端代码用初始化项目之后，新建一个路由文件路由设置上传的图片文件存放的地方为根目录下的文件夹

原文首发：https://shuirong.github.io/
博主经过实践，这里给出两种处理用户上传图片的方法，前后端代码皆有．

1. 前端jQuery,后端Express的Multer中间件

index.html

fontend.js

function deal(){
    let file = new FormData(document.getElementById("picForm"));
    file.append("CustomField", "This is some extra data");
    $.ajax({
      url: "/update",
      type: "POST",
      data: file,
      processData: false,  /* 告诉jQuery不要去处理发送的数据*/
      contentType: false   /* 告诉jQuery不要去设置Content-Type请求头*/
    });
}

backend.js

/*后端代码：用express初始化项目之后，新建一个路由文件．路由update. update.js */
var express = require("express");
var router = express.Router();
var multer = require("multer");
var upload = multer({
    dest: "uploads/" /*设置上传的图片/文件存放的地方为根目录下的uploads文件夹*/
});

/*single(fieldName) 中的fieldName必须和HTML中input的属性name的值一样*/
router.post("/",upload.single("avatar"),function(req,res,next) {
    console.log(req.file); /* req.file 是 `logo` 文件的信息*/
      console.log(req.body); /* req.body 保存表单文本域数据, 如果存在的话*/
    res.send("Upload Done !");
});

module.exports = router;

多图片上传

和单图上传并预览基本一个套路．

/*其他地方和上面的一样. update.js*/
router.post("/",upload.array("avatars",3),function(req,res,next) {
    console.log(req.files); /* req.files 是 `avatars` 文件数组的信息*/
      console.log(req.body); /* req.body 保存表单文本域数据, 如果存在的话*/
    res.send("Upload Done !");
});

2. 前后端皆原生JS

前端把图片转换成base64格式，后端再转成二进制数据（存成图片）

index.html

fontend.js

inputChange(e) {
  const files = e.target.files[0];
  const reader = new FileReader();
  reader.onload = (ee) => {
    const data = {
      base64: ee.target.result,
    };
    post(this.uploadUrl, data).then((res) => {
      // 根据返回数据做些处理．
    }).catch((err) => {
      console.info("Error", err);
    });
  };
  reader.readAsDataURL(files);
}

/* 这里把xhr的post给封装了 */
post(url, data) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304)) {
          resolve(JSON.parse(xhr.responseText));
        } else {
          reject(`XHR unsuccessful:${xhr.status}`);
        }
      }
    };
    xhr.open("post", url, true);
    xhr.setRequestHeader("content-type", "application/json");
    xhr.send(JSON.stringify(data));
  });
}

backend.js

const express = require("express");
const router = express.Router();
const fs = require("fs");

router.route("/")
    .post(upload.single("image"), (req, res) => {
        let base64 = req.body.base64;
        //去掉base64数据最前面的＂图片类型＂字符串
        let type = base64.match(/^data:image/(.+);/)[1];
        base64 = base64.replace(/^data:image/w+;base64,/, "");
        // 解码base64成二进制数据．
        let data = new Buffer(base64, "base64");
        const name = `uploads/images/${String(new Date()).replace(/[ :]/g,"").match(/.{6}(.{12})/)[1]}.${type}`;
        fs.open(name, "a", 0644, function(e, fd) {
            if (e) throw e;
            fs.write(fd, data, function(e) {
                if (e) throw e;
                fs.closeSync(fd);
                res.json({
                    "path": name.replace("uploads", ""),
                });
            });
        });

    });

module.exports = router;

PS: 　关于美化文件上传按钮，一个思路就是设置input的opacity为0，然后在外面包裹一个div．

PPS:　CSS的奇技淫巧还是很多的．

云服务器 GPU云服务器 php图片上传的方法原生js和jquery 数据统计的两种方法 js 上传图片的案例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86990.html

Express系列之multer

摘要：目前觉得对我有用的是和。后者可以在本地调试页面，对于手机页面尤其有用。这次主要说一下，我并没有实现所有的功能，只是实现单图片上传这一个功能，其他的再摸索喽。目前就这样，下次弄出来了多图片上传我再接着更新。这两天在看《nodejs权威指南》，这本书看了好久了，但是读的一直不细，这次才好好看了一遍。收获还是蛮多的，主要在于wenpack使用的一些细节问题，有点茅塞顿悟的体验吧，另外在n...

Null 2019-08-21 17:17 评论0 收藏0
node.js实现formdata上传文件

摘要：对象包含表单的文本域信息，或对象包含对象表单上传的文件信息。是文件的信息前端传递的文件类型在中获取将具有文本域数据，如果存在的话。 node.js实现formdata上传文件 1.关于formdata XMLHttpRequest Level 2 添加了一个新的接口——FormData。利用 FormData 对象，我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件，...

Aceyclee 2019-08-22 13:56 评论0 收藏0
[ 一起学React系列 -- 8 ] React中的文件上传

摘要：前言本期的主题是在中如何实现文件上传。文件上传解决方案目前比较主流的解决方案就是表单或者和表单来实现。文件上传解决方案表单利用表单组件进行文件上传是远古时期就一直在用的方法而且还真经久不衰，厉害了。终于抽出时间来继续更新自己的博客，最近忙得够呛...对于该系列博客不知道大家有没有这样的看法，对于React常见的基础东西并没有过多或者详细列出，感觉有点不符合系列标题。的确，笔者一开始也...

Travis 2019-08-23 12:35 评论0 收藏0
一步一步搭建一个图片上传网站（后台服务器用nodejs）

摘要：把文件上传路径指定到然后用当前日期和文件名命名上传过来的文件。后端利用建立服务器，利用中间件指定文件路径。利用这个前端和后端技术，我们基本上就可以做出一个图片上传存储的基本网站核心。前几天看了腾讯云社区的一个文件上传的文章文件上传那些事儿，大体上讲了以下h5中图片上传的几个核心原理，但是没有后端接受的服务器代码，没法做测试。也没有具体的一个实例都是一些基本的原理片段，并且ui界面也不...

Darkgel 2019-08-20 16:21 评论0 收藏0
H5拖放+FormData接口+NodeJS，完整异步文件上传（一）

摘要：前段时间面试过程中，频繁遇到异步文件上传的相关问题。所以，这会是一个拖放接口实现文件异步上传的完整。监听放置元素的事件，通过对象可以获得拖拽事件的状态及数据。后端文件接收保存后端使用实现文件上传。前段时间面试过程中，频繁遇到H5异步文件上传的相关问题。还遇到过一个通过H5拖放功能实现文件异步上传的问题，大概知道H5有新增拖拽功能可以接收文件，如何异步上传文件就母鸡了(摊手)。面试...

NervosNetwork 2019-08-22 15:57 评论0 收藏0