node 文件上传接口的转发的实现
近期的项目里使用了这样一个项目架构: 前端 -> nodejs -> java
- 前端负责实现业务逻辑的展示和交互
- nodejs 包括维护某些数据和接口转发
- java 负责维护剩下的数据
在 nodejs 的接口转发中拦截一部分接口，再对请求的方法进行区分，请求后台数据后，再进行返回。现有的接口中基本只用到了 get 和 post 两种，但是在文件上传的时候遇到了问题。
node 层使用 eggjs ，一般的 post 的请求直接在 ctx.body 就能拿到请求的参数，但是 /upload 的接口就不行，拿到的 body 是 {} ，下面我们来逐步分析。
js 中的文件
web 中的 Blob 、File 和 Formdate
一个 Blob ( Binary Large Object ) 对象表示一个不可变的, 原始数据的类似文件对象。Blob表示的数据不一定是一个JavaScript原生格式。 File 接口基于Blob，继承 Blob 功能并将其扩展为支持用户系统上的文件。
前端上传文件的方式无非就是使用：1、表单自动上传；2、使用 ajax 上传。我们可以使用以下代码创建一个 Form,并打印出 file
<form method="POST" id="uploadForm" enctype="multipart/form-data">
<input type="file" id="file" name="file" />
</form>
<button id="submit">submit</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#submit").click(function() {
console.log($("#file")[0].files[0])
});
</script>
从 F12 中可以看出 File 原型链上是 Blob。
简单地说 Blob 可以理解为 Web 中的二进制文件。 而 File 是基于 Blob 实现的一个类，新增了关于文件有关的一些信息。
FormData对象的作用就类似于 Jq 的 serialize() 方法，不过 FormData 是浏览器原生的，且支持二进制文件。 ajax 通过 FormData 这个对象发送表单请求，无论是原生的 XMLHttpRequest 、jq 的 ajax 方法、 axios 都是在 data 里直接指定上传 formData 类型的数据，fetch api 是在 body 里上传。
forData 数据有两种方式生成,如下 formData 和 formData2 的区别，而 formData2 可以通过传入一个 element 的方式进行初始化，初始化之后依然可以调用 formData 的 append 方法。
<!DOCTYPE html>
<html>
<form method="POST" id="uploadForm" name="uploadFormName" enctype="multipart/form-data">
<input type="file" id="fileImag" name="configFile" />
</form>
<div id="show"></div>
<button id="submit">submit</button>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</html>
<script>
$("#submit").click(function() {
const file = $("#fileImag")[0].files[0];
const formData = new FormData();
formData.append("fileImag", file);
console.log(formData.getAll("fileImag"));
const formData2 = new FormData(document.querySelector("#uploadForm"));
// const formData2 = new FormData(document.forms.namedItem("uploadFormName"););
console.log(formData2.get("configFile"));
});
</script>
console.log() 无法直接打印出 formData 的数据，可以使用 get(key) 或者 getAll(key)
- 如果是使用 new FormData(element) 的创建方式，上面 key 为 <input /> 上的 name 字段。
- 如果是使用 append 添加的数据，get/getAll 时 key 为 append 所指定的 key。
node 中的 Buffer 、 Stream 、fs
Buffer 和 Stream 是 node 为了让 js 在后端拥有处理二进制文件而出现的数据结构。
通过名字可以看出 buffer 是缓存的意思。存储在内存当中，所以大小有限，buffer 是 C++ 层面分配的，所得内存不在 V8 内。
stream 可以用水流形容数据的流动，在文件 I/O、网络 I/O中数据的传输都可以称之为流。
通过两个 fs 的 api 看出，readFile 不指定字符编码默认返回 buffer 类型，而 createReadStream 将文件转化为一个 stream ， nodejs 中的 stream 通过 data 事件能够一点一点地拿到文件内容，直到 end 事件响应为止。
const fs = require("fs");
fs.readFile("./package.json", function(err, buffer) {
if (err) throw err;
console.log("buffer", buffer);
});
function readLines(input, func) {
var remaining = "";
input.on("data", function(data) {
remaining += data;
var index = remaining.indexOf("\n");
var last = 0;
while (index > -1) {
var line = remaining.substring(last, index);
last = index + 1;
func(line);
index = remaining.indexOf("\n", last);
}
remaining = remaining.substring(last);
});
input.on("end", function() {
if (remaining.length > 0) {
func(remaining);
}
});
}
function func(data) {
console.log("Line: " + data);
}
var input = fs.createReadStream("./package.json");
input.setEncoding("binary");
readLines(input, func);
fs.readFile() 函数会缓冲整个文件。 为了最小化内存成本，尽可能通过 fs.createReadStream() 进行流式传输。
使用 nodejs 创建 uoload api
http 协议中的文件上传
在 http 的请求头中 Content-type 是 multipart/form-data 时，请求的内容如下：
POST / HTTP/1.1 Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryoMwe4OxVN0Iuf1S4 Origin: http://localhost:3000 Referer: http://localhost:3000/upload Sec-Fetch-Mode: navigate Sec-Fetch-User: ?1 Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36 ------WebKitFormBoundaryoqBx9oYBhx4SF1YQ Content-Disposition: form-data; name="upload" http://localhost:3000 ------WebKitFormBoundaryoMwe4OxVN0Iuf1S4 Content-Disposition: form-data; name="upload"; filename="IMG_9429.JPG" Content-Type: image/jpeg ����JFIF��C // 文件的二进制数据 …… --------WebKitFormBoundaryoMwe4OxVN0Iuf1S4--
根据 WebKitFormBoundaryoMwe4OxVN0Iuf1S4 可以分割出文件的二进制内容
原生 node
使用原生的 node 写一个文件上传的 demo
const http = require("http");
const fs = require("fs");
const util = require("util");
const querystring = require("querystring");
//用http模块创建一个http服务端
http
.createServer(function(req, res) {
if (req.url == "/upload" && req.method.toLowerCase() === "get") {
//显示一个用于文件上传的form
res.writeHead(200, { "content-type": "text/html" });
res.end(
'<form action="/upload" enctype="multipart/form-data" method="post">' +
'<input type="file" name="upload" multiple="multiple" />' +
'<input type="submit" value="Upload" />' +
"</form>"
);
} else if (req.url == "/upload" && req.method.toLowerCase() === "post") {
if (req.headers["content-type"].indexOf("multipart/form-data") !== -1)
parseFile(req, res);
} else {
res.end("pelease upload img");
}
})
.listen(3000);
function parseFile(req, res) {
req.setEncoding("binary");
let body = ""; // 文件数据
let fileName = ""; // 文件名
// 边界字符串 ----WebKitFormBoundaryoMwe4OxVN0Iuf1S4
const boundary = req.headers["content-type"]
.split("; ")[1]
.replace("boundary=", "");
req.on("data", function(chunk) {
body += chunk;
});
req.on("end", function() {
const file = querystring.parse(body, "\r\n", ":");
// 只处理图片文件;
if (file["Content-Type"].indexOf("image") !== -1) {
//获取文件名
var fileInfo = file["Content-Disposition"].split("; ");
for (value in fileInfo) {
if (fileInfo[value].indexOf("filename=") != -1) {
fileName = fileInfo[value].substring(10, fileInfo[value].length - 1);
if (fileName.indexOf("\\") != -1) {
fileName = fileName.substring(fileName.lastIndexOf("\\") + 1);
}
console.log("文件名: " + fileName);
}
}
// 获取图片类型(如：image/gif 或 image/png))
const entireData = body.toString();
const contentTypeRegex = /Content-Type: image\/.*/;
contentType = file["Content-Type"].substring(1);
//获取文件二进制数据开始位置，即contentType的结尾
const upperBoundary = entireData.indexOf(contentType) + contentType.length;
const shorterData = entireData.substring(upperBoundary);
// 替换开始位置的空格
const binaryDataAlmost = shorterData
.replace(/^\s\s*/, "")
.replace(/\s\s*$/, "");
// 去除数据末尾的额外数据，即: "--"+ boundary + "--"
const binaryData = binaryDataAlmost.substring(
0,
binaryDataAlmost.indexOf("--" + boundary + "--")
);
// console.log("binaryData", binaryData);
const bufferData = new Buffer.from(binaryData, "binary");
console.log("bufferData", bufferData);
// fs.writeFile(fileName, binaryData, "binary", function(err) {
// res.end("sucess");
// });
fs.writeFile(fileName, bufferData, function(err) {
res.end("sucess");
});
} else {
res.end("reupload");
}
});
}
通过 req.setEncoding("binary"); 拿到图片的二进制数据。可以通过以下两种方式处理二进制数据，写入文件。
fs.writeFile(fileName, binaryData, "binary", function(err) {
res.end("sucess");
});
fs.writeFile(fileName, bufferData, function(err) {
res.end("sucess");
});
koa
在 koa 中使用 koa-body 可以通过 ctx.request.files 拿到上传的 file 对象。下面是例子。
'use strict';
const Koa = require('koa');
const app = new Koa();
const router = require('koa-router')();
const koaBody = require('../index')({multipart:true});
router.post('/users', koaBody,
(ctx) => {
console.log(ctx.request.body);
// => POST body
ctx.body = JSON.stringify(ctx.request.body, null, 2);
}
);
router.get('/', (ctx) => {
ctx.set('Content-Type', 'text/html');
ctx.body = `
<!doctype html>
<html>
<body>
<form action="/" enctype="multipart/form-data" method="post">
<input type="text" name="username" placeholder="username"><br>
<input type="text" name="title" placeholder="tile of film"><br>
<input type="file" name="uploads" multiple="multiple"><br>
<button type="submit">Upload</button>
</body>
</html>`;
});
router.post('/', koaBody,
(ctx) => {
console.log('fields: ', ctx.request.body);
// => {username: ""} - if empty
console.log('files: ', ctx.request.files);
/* => {uploads: [
{
"size": 748831,
"path": "/tmp/f7777b4269bf6e64518f96248537c0ab.png",
"name": "some-image.png",
"type": "image/png",
"mtime": "2014-06-17T11:08:52.816Z"
},
{
"size": 379749,
"path": "/tmp/83b8cf0524529482d2f8b5d0852f49bf.jpeg",
"name": "nodejs_rulz.jpeg",
"type": "image/jpeg",
"mtime": "2014-06-17T11:08:52.830Z"
}
]}
*/
ctx.body = JSON.stringify(ctx.request.body, null, 2);
}
)
app.use(router.routes());
const port = process.env.PORT || 3333;
app.listen(port);
console.log('Koa server with `koa-body` parser start listening to port %s', port);
console.log('curl -i http://localhost:%s/users -d "user=admin"', port);
console.log('curl -i http://localhost:%s/ -F "source=@/path/to/file.png"', port);
我们来看一下 koa-body 的实现
const forms = require('formidable');
function requestbody(opts) {
opts = opts || {};
...
opts.multipart = 'multipart' in opts ? opts.multipart : false;
opts.formidable = 'formidable' in opts ? opts.formidable : {};
...
// @todo: next major version, opts.strict support should be removed
if (opts.strict && opts.parsedMethods) {
throw new Error('Cannot use strict and parsedMethods options at the same time.')
}
if ('strict' in opts) {
console.warn('DEPRECATED: opts.strict has been deprecated in favor of opts.parsedMethods.')
if (opts.strict) {
opts.parsedMethods = ['POST', 'PUT', 'PATCH']
} else {
opts.parsedMethods = ['POST', 'PUT', 'PATCH', 'GET', 'HEAD', 'DELETE']
}
}
opts.parsedMethods = 'parsedMethods' in opts ? opts.parsedMethods : ['POST', 'PUT', 'PATCH']
opts.parsedMethods = opts.parsedMethods.map(function (method) { return method.toUpperCase() })
return function (ctx, next) {
var bodyPromise;
// only parse the body on specifically chosen methods
if (opts.parsedMethods.includes(ctx.method.toUpperCase())) {
try {
if (opts.json && ctx.is(jsonTypes)) {
bodyPromise = buddy.json(ctx, {
encoding: opts.encoding,
limit: opts.jsonLimit,
strict: opts.jsonStrict,
returnRawBody: opts.includeUnparsed
});
} else if (opts.multipart && ctx.is('multipart')) {
bodyPromise = formy(ctx, opts.formidable);
}
} catch (parsingError) {
if (typeof opts.onError === 'function') {
opts.onError(parsingError, ctx);
} else {
throw parsingError;
}
}
}
bodyPromise = bodyPromise || Promise.resolve({});
/**
* Check if multipart handling is enabled and that this is a multipart request
*
* @param {Object} ctx
* @param {Object} opts
* @return {Boolean} true if request is multipart and being treated as so
* @api private
*/
function isMultiPart(ctx, opts) {
return opts.multipart && ctx.is('multipart');
}
/**
* Donable formidable
*
* @param {Stream} ctx
* @param {Object} opts
* @return {Promise}
* @api private
*/
function formy(ctx, opts) {
return new Promise(function (resolve, reject) {
var fields = {};
var files = {};
var form = new forms.IncomingForm(opts);
form.on('end', function () {
return resolve({
fields: fields,
files: files
});
}).on('error', function (err) {
return reject(err);
}).on('field', function (field, value) {
if (fields[field]) {
if (Array.isArray(fields[field])) {
fields[field].push(value);
} else {
fields[field] = [fields[field], value];
}
} else {
fields[field] = value;
}
}).on('file', function (field, file) {
if (files[field]) {
if (Array.isArray(files[field])) {
files[field].push(file);
} else {
files[field] = [files[field], file];
}
} else {
files[field] = file;
}
});
if (opts.onFileBegin) {
form.on('fileBegin', opts.onFileBegin);
}
form.parse(ctx.req);
});
}
代码中删除了影响有关文件上传的相关逻辑
- 首先 multipart 为 true 是开启文件上传的关键。
- 然后
formy函数处理了 http 解析和保存的一系列过程，最终将 files 抛出进行统一处理。代码中依赖了formidable这个库，我们其实也可以直接使用这个库对文件进行处理。（上面的原生 node upload 只是简单地处理了一下） - opts.formidable 是 formidable 的 config 可以设置文件大小，保存的文件路径等等。
eggjs
使用 eggjs 进行文件上传需要现在配置文件中开启
config.multipart = { mode: "file", fileSize: "600mb" };
然后通过 ctx.request.files[0] 就能取到文件信息。
文件上传接口的转发
一千个观众眼中有一千个哈姆雷特，通过以上知识点的梳理，我相信你也有了自己得想法。在这里说一下我是怎么处理的。 在 egg 中我使用了 request-promise 去做接口转发，通过查看 api 和 ctx.request.files[0] 拿到的信息，我做了以下处理。
if (method === "POST") {
options.body = request.body;
options.json = true;
if (url === uploadeUrl) {
delete options.body;
options.formData = {
// Like <input type="text" name="name">
name: "file",
// Like <input type="file" name="file">
file: {
value: fs.createReadStream(ctx.request.files[0].filepath),
options: {
filename: ctx.request.files[0].filename,
contentType: ctx.get("content-type")
}
}
};
}
} else {
options.qs = query;
}
总结
- http 中的文件上传第一步就是设置 Content-type 为 multipart/form-data 的 header。
- 区分好 web 端 js 和 node 端处理文件的方式有所不同。
- 有些 npm 模块的 readme 并不是很清晰，可以直接下源码去看 example ，或者直接读源码，就比如上文中没有提到的 koa-body 中 formidable 的用法并未在他的 reademe 中写出，直接看源码会发现更多用法。
- 文中的知识点很多知识稍微提及，可以进一步深入了解与他相关的知识。比如 web 的 FileReader 等等。
- 最后如果文中有任何错误请及时指出，有任何问题可以讨论。
参考
https://www.jb51.net/article/170637.htm
https://www.npmjs.com/package/formidable
https://github.com/dlau/koa-body
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
nodejs+express实现文件上传下载管理网站
nodejs+express-实现文件上传下载管理的网站 项目Github地址:https://github.com/qcer/updo 后端:基于nodejs的express的web框架. 前端:bootstrap框架+vuejs.jquery等js库 功能点: dronzone.js实现文件拖拽上传.下载,可自定义传输容量. vuejs实现表格双向数据绑定. jquery.form.min.js表单插件,升级表单,实现表单提交回调. 纯css+jQuery实现一键返回顶部. 简单的ajax异
-
利用nodejs监控文件变化并使用sftp上传到服务器
最近在用react+express做一个自己的工具型网站(其实就是夺宝岛抢拍器) 然后因为经常要改动,而且又要放到服务器上进行测试.总是要webpack,然后手动把文件上传上去,不胜其烦,索性搜索了下,直接写个能检测文件变化并自动进行上传的脚本好了. 首先,我们使用npm 安装两个别人封装好的模块. npm install ssh2-sftp-client npm install gaze 第一个模块的作用是sftp上传文件, 第二个模块的作用就是监听文件变化了.当然,你也可以采用node自带f
-
Node.js实现文件上传的示例
文件上传指的是将用户本地的文件上传到服务器中. 上传文件需要处理两个位置: 客户端 客户端如何上传文件? 上传文件的表单项需要指定为input,type是file 要上传文件必须将表单enctype设置为multipart/form-data 这个参数表示表单将会以多部件表单的形式上传enctype="application/x-www-form-urlencoded"是默认值.这个值的意思指将会对表单项的内容进行url编码,所谓url编码就将请求参数转换为二进制编码. 1.multi
-
Nodejs实现文件上传的示例代码
笔者用nodejs做项目时需要用到文件上传的功能,在网上搜索了很多教程,找到了一个express的中间件,用于处理 multipart/form-data 类型的表单数据,可以很方便的将表单中的文件数据保存到服务器. 介绍 简单的用法 定义存储器 Multer作为express的一个中间件,我们可以很方便的自定义上传的文件目录以及保存的文件名.先看一个最简单的用法, demo1地址 : var express = require('express'); var multer = require(
-
Node.js实现文件上传
在工作中碰到了这样的需求,需要用nodejs 来上传文件,之前也只是知道怎么通过浏览器来上传文件, 用nodejs的话, 相当于模拟浏览器的行为. google 了一番之后, 明白了浏览器无非就是利用http协议来给服务器传输数据, 具体协议就是<RFC 1867 - Form-based File Upload in HTML>, 在浏览器上通过form 表单来上传文件就是通过这个协议,我们可以先看看浏览器给服务端发送了什么数据, 就可以依葫芦画瓢的把上传功能实现出来.说起form 表单上传
-
Node.js上传文件功能之服务端如何获取文件上传进度
内容概述 multer是常用的Express文件上传中间件.服务端如何获取文件上传的进度,是使用的过程中,很常见的一个问题.在SF上也有同学问了类似问题<nodejs multer有没有查看文件上传进度的方法?>.稍微回答了下,这里顺便整理出来,有同样疑问的同学可以参考. 下文主要介绍如何利用progress-stream获取文件上传进度,以及该组件使用过程中的注意事项. 利用progress-stream获取文件上传进度 如果只是想在服务端获取上传进度,可以试下如下代码.注意,这个模块跟Ex
-
nodejs multer实现文件上传与下载
本文实例为大家分享了nodejs实现文件上传下载的具体代码,供大家参考,具体内容如下 1.介绍 做了一个关于文件上传和下载的demo ,选择了Multer 作为中间件进行数据处理. 关于multer请参考中文翻译文档 https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md 或者官方文档 2. upload 文件上传 html form标签内设置enctype="multipart/form-data"是必须
-
使用nodejs+express实现简单的文件上传功能
1.建立express项目 express -e nodejs-uploadfile 2.下载multer中间件 npm i multer or yarn multer 3.在routes/index.js中引用multer,由于还要使用到文件操作,还要引用fs模块,并指定文件上传目录 const multer = require('multer'); const fs = require('fs'); const UPLOAD_PATH = './uploads' 单文件上传: index.h
-
nodejs 实现模拟form表单上传文件
以前项目里有这个方法,最近在客户那里出问题了,同事说,这个方法从来就没管用过,SO,用了一天时间把这个方法给搞出来了(觉得花费的时间长了点),分享之. 代码及测试用例: var http = require('http'); var path = require('path'); var fs = require('fs'); function postFile(fileKeyValue, req) { var boundaryKey = Math.random().toString(16);
-
node 文件上传接口的转发的实现
近期的项目里使用了这样一个项目架构: 前端 -> nodejs -> java 前端负责实现业务逻辑的展示和交互 nodejs 包括维护某些数据和接口转发 java 负责维护剩下的数据 在 nodejs 的接口转发中拦截一部分接口,再对请求的方法进行区分,请求后台数据后,再进行返回.现有的接口中基本只用到了 get 和 post 两种,但是在文件上传的时候遇到了问题. node 层使用 eggjs ,一般的 post 的请求直接在 ctx.body 就能拿到请求的参数,但是 /upload 的
-
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
富文本-图片上传 html: <div class="layui-form-item layui-form-text"> <div class="layui-input-block"> <!--<textarea id="L_content" name="contents" required lay-verify="required" placeholder="
-
springboot多文件上传实现使用postman测试多文件上传接口
使用postman测试多文件上传接口 1.创建测试类(FileController.java) package com.jeff.controller; import java.io.File; import java.io.IOException; import java.util.List; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annot
-
SpringBoot实现文件上传接口
摘要 公司都是采用SpringBoot作为项目框架,其实SpringBoot和SSM框架很接近,基本上只是将SSM的一些配置项修改为自动配置或者简单的注解配置就可以了,建议不了解的SpringBoot的朋友们可以了解一下,上手很快,其实文件上传框架根本没有多大关系.我只是顺便帮SpringBoot打个广告罢了. 正题 需求:需要实现一个文件上传的web接口. 1.先实现一个Controller接口,如下: package com.lanxuewei.utils.aspect; import co
-
关于node编写文件上传的接口的坑及解决
目录 node编写文件上传接口的坑 在app.js引入,进行路由 node(express)图片上传接口写法 需要 步骤和代码 node编写文件上传接口的坑 今天没事在写node的接口时候用到文件上传的接口给前端,不知道用中间件好一点,然后就找度娘,网上都是koa-body中间件,但是那个自己测试老是接收不到传过来的文件file的值,然后换另一种就是koa-multer 完美解决. 首先是在这里插入代码片npm i koa-multer 在app.js引入,进行路由 控制器代码: 路由代码 然后
-
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
-
Python接口自动化之文件上传/下载接口详解
目录 〇.前言 一.文件上传接口 1. 接口文档 2. 代码实现 二.文件下载接口 1. 接口文档 2. 代码实现 总结 〇.前言 文件上传/下载接口与普通接口类似,但是有细微的区别. 如果需要发送文件到服务器,例如:上传文档.图片.视频等,就需要发送二进制数据,上传文件一般使用的都是 Content-Type: multipart/form-data 数据类型,可以发送文件,也可以发送相关的消息体数据. 反之,文件下载就是将二进制格式的响应内容存储到本地,并根据需要下载的文件的格式来写文件名,
-
Bootstrap fileinput文件上传预览插件使用详解
介绍 通过本文,你可以学习到如何封装或者开发一个前端组件,同时学习Bootstrap-fileinput组件的使用,封装后使用更加简单方便. BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件,它支持 支持多文件.在线预览.拖拽上传等功能,封装后BaseFile主要包括以下功能: 弹出窗口的附件上传 当前界面的附件上传 显示附件明细 可编辑的附件明细(删除.预览.不可新增) 关于Bootstrap-fileinput的API文档可参考http://p
-
Feign实现跨服务文件上传下载
本文实例为大家分享了Feign实现跨服务的文件上传下载操作,供大家参考,具体内容如下 1.跨服务文件上传,目前feign不支持调用文件上传接口,需要自行配置来满足feign的调用方式 ①.首先需要在pom文件里添加feign依赖 <dependency> <groupId>io.github.openfeign.form</groupId> <artifactId>feign-form-spring</artifactId> <versio
-
antd Upload 文件上传的示例代码
1.antd官网Upload组件: https://ant.design/components/upload-cn/ 2.下图是最近开发的上传文档的效果: 3.文件上传的实现: (1)方法一:antd默认上传. a:渲染文件上传组件.getPDFURL()方法为实现文件的上传.showUploadList为是否展示 uploadList, true显示,false不显示,其可设为一个对象,用于单独设定 showPreviewIcon 和 showRemoveIcon.type为上传按钮的图标.如