问答

请教一个用axios formdata express nodejs上传图片的问题

作者:admin 2021-05-06 我要评论

用formdata上传图片,只append了e.target.files[0],直接打印这个的话,只看见了很多参数没有看到本体,请求的数据量也不大,后端的文件夹里却有这张图片,也返...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

用formdata上传图片,只append了e.target.files[0],直接打印这个的话,只看见了很多参数没有看到本体,请求的数据量也不大,后端的文件夹里却有这张图片,也返回了URL
非常纠结这样写能不能真正的把图片本体传过去,请大佬解答

###

能传过去,他只是不显示.

image.png

你用其他工具,fiddler之类的,在这个位置能看到
image.png

###

express开发图片上传的api方法:

// 引入fs模块,用于操作文件
const fs = require("fs");

// 引入path模块,用于操作文件路径
const path = require("path");

// 配置对象
let exportObj = {
  upload,
  delFile,
};

// 导出对象,供其它模块调用
module.exports = exportObj;

// 上传图片方法

function upload(req, res) {

  // 定义一个返回对象

  const resObj = Common.clone(Constant.DEFAULT_SUCCESS);

  // 定义一个async任务

  let tasks = {

    // 校验参数方法

    checkParams: (cb) => {

      // 调用公共方法中的校验参数方法,成功继续后面操作,失败则传递错误信息到async最终方法

      Common.checkParams(req.file, ["originalname"], cb);

    },

    // 查询方法,依赖校验参数方法

    save: [

      "checkParams",

      (results, cb) => {

        // 获取上传文件的扩展名

        let lastIndex = req.file.originalname.lastIndexOf(".");

        let extension = req.file.originalname.substr(lastIndex - 1);

        // 使用时间戳作为新文件名

        let fileName = new Date().getTime() + extension;

        console.log(fileName);

        // 保存文件,用新文件名写入

        // 三个参数

        // 1.图片的绝对路径

        // 2.写入的内容

        // 3.回调函数

        fs.writeFile(

          path.join(__dirname, "../public/upload/" + fileName),

          req.file.buffer,

          (err) => {

            // 保存文件出错

            if (err) {

              cb(Constant.SAVE_FILE_ERROR);

            } else {

              resObj.data = {

                // 返回文件名

                fileName: fileName,

                // 通过公共方法getImgUrl拼接图片路径

                path: Common.getImgUrl(req, fileName),

              };

              cb(null);

            }

          }

        );

      },

    ],

  };

  // 执行公共方法中的autoFn方法,返回数据

  Common.autoFn(tasks, res, resObj);

}

// 删除上传的文件

function delFile(req, res) {

  // 定义一个返回对象

  const resObj = Common.clone(Constant.DEFAULT_SUCCESS);

  // 定义一个async任务

  let tasks = {

    // 校验参数方法

    checkParams: (cb) => {

      // 调用公共方法中的校验参数方法,成功继续后面操作,失败则传递错误信息到async最终方法

      Common.checkParams(req.body, ["filename"], cb);

    },

    // 查询方法,依赖校验参数方法

    remove: [

      "checkParams",

      (results, cb) => {

        let fileName = req.body.filename;

        let filepath = path.join(__dirname, "../public/upload/" + fileName);

        fs.unlink(filepath, (err) => {

          if (err) {

            cb(Constant.DEL_FILE_ERROR);

          } else {

            cb(null);

          }

        });

      },

    ],

  };

  // 执行公共方法中的autoFn方法,返回数据

  Common.autoFn(tasks, res, resObj);

}

然后通过router把api地址暴露出来。

// 定义上传图片路由,POST请求

router.post("/upload", uploadMiddleware.single("img"), IndexController.upload);

// 定义上传图片路由,delete请求

router.delete("/delfile", IndexController.delFile);

接下来就可以在前端通过axios调用图片上传api来上传图片和删除图片。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 请教一个用axios formdata express nod

    请教一个用axios formdata express nod

  • DSL是否如何实现递归查询?

    DSL是否如何实现递归查询?

  • js 如何隔着背景png拖动其下边的img

    js 如何隔着背景png拖动其下边的img

  • Canvas的 Fabric.js库如何让元素不超出

    Canvas的 Fabric.js库如何让元素不超出

腾讯云代理商
海外云服务器