node+axios实现服务端文件上传示例

目录
  • 一、接口文档介绍
  • 二、文件上传
    • 2-1.初始化项目
    • 2-2.安装插件依赖
    • 2-3.上传核心代码
    • 2-4.执行脚本

最近调研企业wx集成H5应用，其中有一个发送图文消息，需要上传图片到临时素材库。之前做过文件上传到阿里云、七牛云都是服务端提供封装好的文件上传接口，在客户端使用ajax的方式上传。所以就来踩踩坑，使用node+axios实现服务端文件上传。

一、接口文档介绍

请求方式：POST（HTTPS）

请求地址：https://qyapi.weixin.qq.com/cgi-bin/media/upload?access_token=ACCESS_TOKEN&type=TYPE

  • 使用multipart/form-data POST上传文件， 文件标识名为”media”。
  • POST的请求包中，form-data中媒体文件标识，应包含有 filename、filelength、content-type等信息。
  • 参数说明：
参数 必须 说明
access_token 是 调用接口凭证
type 是 媒体文件类型，分别有图片（image）、语音（voice）、视频（video），普通文件（file）

二、文件上传

2-1.初始化项目

# 创建目录
mkdir upload-demo
# 进入upload-demo目录
cd upload-demo
# npm 初始化
npm init -y
# 创建app.js
touch app.js

2-2.安装插件依赖

axios：是一个基于 promise 的 HTTP 库，可以用在客户端浏览器和服务端node.js 中。

form-data：是创建可读multipart/form-data流的库。可用于向其他 Web 应用程序提交表单和文件上传。

npm i -S axios form-data

2-3.上传核心代码

// app.js
const fs = require('fs')
const FormData = require('form-data')
const axios = require('axios')
;(()=>{
    let formData = new FormData();
    let imgFiles = fs.createReadStream('./test.jpg')    // 根目录下需要有一个test.jpg文件
    formData.append('media', imgFiles);
    axios({
        url: 'https://qyapi.weixin.qq.com/cgi-bin/media/upload',
        method: 'POST',
        params: {
            access_token: 'ACCESS_TOKEN',   // ACCESS_TOKEN 需要替换为真实 token
            type: 'image',   // 这里以上图片为例
        },
        data: formData,
        headers: {
            'Content-Type': 'multipart/form-data', // 必须要设置
        },
    }).then(res=>{
        console.log(res.data)
    })
})();

2-4.执行脚本

node app.js

不出意外会输入以下内容：

{
   "errcode": 0,
   "errmsg": ""，
   "type": "image",
   "media_id": "1G6nrLmr5EC3MMb_-zK1dDdzmd0p7cNliYu9V5w7o8K0",
   "created_at": "1380000000"
}

其中media_id就是上传到素材库的媒体文件唯一标识，发送图文消息时需要用到。

以上就是node+axios实现服务端文件上传示例的详细内容，更多关于node+axios服务端文件上传的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • node.js中axios使用心得总结

    node.js中axios使用心得总结

    Axios是一个基于Promise的 HTTP 库,可以用在浏览器和node.js 中,因为尤大大的推荐,axios也变得越来越流行.最近项目中使用axios也遇到了一些问题,就借此机会总结一下,如有错误,还请不吝指正. 功能 浏览器端发起XMLHttpRequests请求 node层发起http请求 支持Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防御XSRF(跨站请求伪造) 兼容 使用 npm npm install axios bo

  • nodejs(officegen)+vue(axios)在客户端导出word文档的方法

    nodejs(officegen)+vue(axios)在客户端导出word文档的方法

    前言 我的项目中有一个需求:点击按钮生成可编辑的word文档订单详情的信息 我使用的前端框架是Vue.js.后台使用的是node.js node.js生成和导出word文档我参考的是下面这两篇文章,写的挺好的(github上的那篇里面还有node.js生成word.excel.ppt的example,需要详细的可以看里面) https://www.jb51.net/article/144769.htm https://github.com/Ziv-Barber... 问题 node.js上面这两

  • 详解Vue+axios+Node+express实现文件上传(用户头像上传)

    Vue 页面的代码 <label for='my_file' class="theme-color"> <mu-icon left value="backup"></mu-icon> 修改头像 </label> <input type="file" ref="upload" name="avatar" id='my_file' style="d

  • nodejs+axios爬取html出现中文乱码并解决示例

    目录 一.乱码原因 二.解决办法 一.乱码原因 当使用 nodejs + axios 来爬取某个 url 对应的 html 时,出现中文乱码. 在 HTML 页面的 head 中没有设置 <meta charset="UTF-8"> ,而 html 页面默认是 GBK 的编码. 使用 axios 发送请求 responseEncoding 默认是 utf8,造成编码不一致,导致最后获取到的 html 内容出现中文乱码. 二.解决办法 以二进制流的形式获取 HTML 内容,再

  • node.js通过axios实现网络请求的方法

    1.使用Npm 下载axios npm install --save axios var update_url = axios.create({ baseURL:'debug url' }); update_url.get('/debug url').then(function (response){ //response 就是请求url 返回的内容 } 上述的方法请求文件时候,body的默认格式不是form-data.因此我们需要请求的数据格式为form-data的时候,需要使用下面的库 re

  • node+axios实现下载外网文件到本地

    目录 引言 初始化项目 安装axios 实现逻辑 执行 引言 作为一个web前端开发,对axios肯定不陌生,但是在前端开发中,一般是使用axios来请求后端接口,获取数据.而使用node+axios下载网络文件到本地磁盘可能很少接触,搜索了很多相关的博客文章,讲解的好像都不够清晰明了,所以本文就记录一下实践方法. 初始化项目 npm init -y 安装axios npm i -S axios 实现逻辑 根目录下新建app.js // app.js const axios = require(

  • node+axios实现服务端文件上传示例

    目录 一.接口文档介绍 二.文件上传 2-1.初始化项目 2-2.安装插件依赖 2-3.上传核心代码 2-4.执行脚本 最近调研企业wx集成H5应用,其中有一个发送图文消息,需要上传图片到临时素材库.之前做过文件上传到阿里云.七牛云都是服务端提供封装好的文件上传接口,在客户端使用ajax的方式上传.所以就来踩踩坑,使用node+axios实现服务端文件上传. 一.接口文档介绍 请求方式:POST(HTTPS) 请求地址:https://qyapi.weixin.qq.com/cgi-bin/me

  • node.js express框架实现文件上传与下载功能实例详解

    本文实例讲述了node.js express框架实现文件上传与下载功能.分享给大家供大家参考,具体如下: 背景 昨天吉视传媒的客户对IPS信息发布系统又提了一个新需求,就是发布端发送消息时需要支持附件的上传,而接收端可以对发布端上传的附件进行下载:接收端回复消息时也需要支持上传附件,发布端可以对所有接收端上传的附件进行打包下载. 功能实现 前台部分 前台使用webUploader插件即可,这是百度开发的一款文件上传组件,具体使用查看它的API即可.这个项目之前开发的时候前台使用了angular.

  • Node层模拟实现multipart表单的文件上传示例

    Node层模拟实现multipart表单的文件上传示例

    有时候就是有这样的需求,Nodejs做webserver,从浏览器端上传文件到后端服务器,Node层只是做一个数据中转,如果在这个过程中,Node webserver需要对数据进行适当加工,然后再Post到后端,那么就得在Node层模拟文件上传了. 首先,通过浏览器上传文件,PostData格式是长着个样子的: 屏幕快照 2014-11-22 下午9.18.45.png 如图,每一组数据其实就是用"-----WebkitFormBoundary....."分隔开的,最后再用这个分隔符结

  • vue+vux实现移动端文件上传样式

    vue+vux实现移动端文件上传样式

    样式使用的是vux的cell组件 如下图的官方demo样子 上图的样式需要修改一下,把 保护中 修改成一个图片 并且内嵌一个input type='file'  就可以拥有好看的样式的文件上传了 <!--引入组件--> import { Cell } from 'vux' <!--官网的组件是这么写的--> <group> <cell title="title" value="value"></cell>

  • Axios+Spring Boot实现文件上传和下载

    本文实例为大家分享了Axios+Spring Boot实现文件上传和下载的具体代码,供大家参考,具体内容如下 1.所用技术 前端:Vue + Axios 后端:Springboot + SpringMVC 2.单文件上传 后端代码 只需要使用MultipartFile类配合RequestBody注解即可 @PostMapping("your/path") public ResultData courseCoverUpload(@RequestBody MultipartFile fil

  • Axios和Jquery实现文件上传功能

    本文实例为大家分享了Axios和Jquery实现文件上传的具体代码,供大家参考,具体内容如下 Jquery上传 jquery文件时,后端好像并没有经过SpringMVC处理,没有被封装成一个MultiPartFIle对象,可通过原生的Servlet API request.getInputStream()获取.至于为什么没被SpringMVC封装成MultipartFile对象目前还没有研究透彻.可能是请求内容类型没有设置成 multipart/form-data.下面是jquery上传文件的代

  • Spring Boot实现文件上传示例代码

    Spring Boot实现文件上传示例代码

    使用SpringBoot进行文件上传的方法和SpringMVC差不多,本文单独新建一个最简单的DEMO来说明一下. 主要步骤包括: 1.创建一个springboot项目工程,本例名称(demo-uploadfile). 2.配置 pom.xml 依赖. 3.创建和编写文件上传的 Controller(包含单文件上传和多文件上传). 4.创建和编写文件上传的 HTML 测试页面. 5.文件上传相关限制的配置(可选). 6.运行测试. 项目工程截图如下: 文件代码: <dependencies>

  • SpringMvc MultipartFile实现图片文件上传示例

    SpringMvc MultipartFile实现图片文件上传示例

    整理文档,搜刮出一个SpringMvc MultipartFile实现图片文件上传示例,稍微整理精简一下做下分享. spring-servlet.xml <!-- SpringMVC上传文件时,需要配置MultipartResolver处理器 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver&qu

  • javaweb实现文件上传示例代码

    本文实例为大家分享了javaweb文件下载的具体实现代码,供大家参考,具体内容如下 文件上传示例 注意:jsp页面编码为"UTF-8" 文件上传的必要条件 1.form表单,必须为POST方式提交 2.enctype="multipart/form-data" 3.必须有<input type="file" /> 前端jsp页面 <%@ page language="java" import="ja

  • 使用Feign扩展包实现微服务间文件上传

    使用Feign扩展包实现微服务间文件上传

    在Spring Cloud 的Feign组件中并不支持文件的传输,会出现这样的错误提示: feign.codec.EncodeException: class [Lorg.springframework.web.multipart.MultipartFile; is not a type supported by this encoder. at feign.codec.Encoder$Default.encode(Encoder.java:90) ~[feign-core-9.5.1.jar:

随机推荐