js根据本地文件路径上传文件（流上传）

最近使用vue做了个项目，把本地指定url下的png图片上传。

废话不多说，直接上代码：

var fs = require('fs') //需要引入nodejs中的文件操作部分
var http = require('http') //需要引入nodejs中http请求部分
/*** 实际封装接口的入口* @param {*} options 请求的配置项* @param {*} path 文件上传路径* @param {*} id 文件上传参数（id）* @param {*} name 文件上传参数（name）* @param {*} token 接口上传使用的token* @param {*} cb 上传成功后的回调函数* @param {*} errCb 上传失败后的回调*/
function uploadFile(options, path, id, name, token, cb, errCb){var req = http.request(options, (res)=>{
//    console.log("RES:" + res);
//    console.log('STATUS: ' + res.statusCode);
//    console.log('HEADERS: ' + JSON.stringify(res.headers));res.on("data", (chunk)=>{console.log("BODY:" + chunk);if(typeof cb == 'function'){ //如果请求成功返回，执行成功回调函数cb(JSON.parse(chunk.toString())); //将结果返回，返回结果是json格式的情况下JSON.parse解析下再返回}})})req.on('error', (e)=>{if(typeof errCb == 'function'){ //如果请求失败后，执行失败回调函数errCb(e.toString()); //将结果返回}})postFile([{urlKey: "file", urlValue: path}], req, id, name, token);
}function postFile(fileKeyValue, req, id, name, token) {var boundaryKey = Math.random().toString(16);var enddata = '\r\n----' + boundaryKey + '--';var files = new Array();for (var i = 0; i < fileKeyValue.length; i++) {var content = ''; // "\r\n----" + boundaryKey + "\r\n" + "Content-Type: image/jpeg\r\n" + "Content-Disposition: form-data; name=\"" + fileKeyValue[i].urlKey + "\"; filename=\"" + (fileKeyValue[i].urlValue) + "\"\r\n" + "Content-Transfer-Encoding: binary\r\n\r\n";var contentBinary = new Buffer.from(content, 'utf-8');//当编码为ascii时，中文会乱码。files.push({contentBinary: contentBinary, filePath: fileKeyValue[i].urlValue});}var contentLength = 0;for (var i = 0; i < files.length; i++) {var stat = fs.statSync(files[i].filePath);contentLength += files[i].contentBinary.length;contentLength += stat.size;}//请求参数放到了header头中，后台从header中取req.setHeader('token', token);req.setHeader('id', id);req.setHeader('name', name);// req.setHeader('Content-Type', 'multipart/form-data; boundary=--' + boundaryKey);//这里暂时不设置，浏览器会根据实际上传文件自动识别，如果不行再设置req.setHeader('Content-Type', 'text/html; charset=UTF-8');req.setHeader('Content-Length', contentLength + Buffer.byteLength(enddata));  // 将参数发出var fileindex = 0;var doOneFile = function(){req.write(files[fileindex].contentBinary);var fileStream = fs.createReadStream(files[fileindex].filePath, {bufferSize : 4 * 1024});fileStream.pipe(req, {end: false});fileStream.on('end', function() {fileindex++;if(fileindex == files.length){req.end(enddata);} else {doOneFile();}});};if(fileindex == files.length){req.end(enddata);} else {doOneFile();}
}

函数的调用如下：

  let options = { host: that.$servletUri, //例如：127.0.0.1 不需加http://...port: that.$servletPort, //例如：8080method: "POST", path: '/api/fileupload', //流上传方法名}let fileName = Date.parse(new Date());// 该封装方法放入了utils工具类中，所以这里用this.$util.this.$util.uploadFile(options, fileUrl, that.currentRowId, fileName, this.$store.state.userInfo.token,(res)=>{// 上传成功后执行的方法if(res.code == 1){this.$message('截图上传成功！')}},(err)=>{this.$message.error('截图上传失败，请稍后重试！');});

再贴一下后台代码：

controller：

    @PostMapping("/fileupload")public Response uploadFile(HttpServletRequest request, HttpServletResponse response,Integer id,String fileName) throws Exception{//String fileName = "hh.png";//request.getParameter("fileName");return documentService.uploadFile(request);}

service：

Response uploadFile(HttpServletRequest request);

serviceImpl：

//
// 下面fileUpload这里对应yml文件中配置服务器保存的路径
//
// file:
//   fileUpload: /home/work/java/images/
// @Value("${file.fileUpload}")
private String fileUpload;@Override
public Response uploadFile(HttpServletRequest request) {Integer id = 0;if (null != request.getHeader("id")){id = Integer.parseInt(request.getHeader("id"));}String fileName1 =request.getHeader("name")+".png";String dirPath =fileUpload+id;//会在webapp下面创建此文件夹String fileFullPath = dirPath+System.getProperty("file.separator")+ fileName1;InputStream input = null;FileOutputStream fos = null;try {input = request.getInputStream();File file = new File(dirPath);if(!file.exists()){file.mkdirs();}fos = new FileOutputStream(fileFullPath);byte[] buffer = new byte[1024];/*  int size = 0;byte[] buffer = new byte[4*1024];while ((size = input.read(buffer,0,4*1024)) != -1) {fos.write(buffer, 0, size);}*/int length = 0;do {length = input.read(buffer);if (length > 0) {fos.write(buffer, 0, length);}} while (length>0);} catch (IOException e) {e.printStackTrace();return Response.successErr("操作失败");} finally{if(input != null){try {input.close();} catch (IOException e) {e.printStackTrace();}}if(fos != null){try {fos.close();} catch (IOException e) {e.printStackTrace();}}}
}

js根据本地文件路径上传文件（流上传）相关推荐

PDF分割器3.0-将输入文件路径修改为文件选择对话框，并打印分割和保存文件路径，以及文件分割情况
一.PDF文件分割函数以前已经讲过了参考PDF分割模块二.可视化实现在面的的文章中已经详细讲过了感兴趣的小伙伴可以参考PDF分割器2.0-可视化操作三.文件选择对话框功能引用"tk ...
百度 UEditor--自定义上传文件路径及读取文件
jsp中替换掉上传和预览图片的URL 注意第一句判断,注意要用项目的相对URL return '/sirdifoa/kentra/file/uploadImage.do'; 1 2 3 4 5 6 7 ...
ftp服务器文件复制文件路径,FTP将文件复制到同一FTP的另一个位置
我需要将同一文件上传到同一FTP的2个不同位置. 有没有办法将FTP上的文件复制到另一个位置,而不是再次上传? 谢谢. 斯坦自从他问了这个简单的问题以来已经7年了,而每个人都必须努力完成这项任务已经 ...
【C++】window下使用c++遍历文件夹及其子文件夹和文件，并打印文件路径及各文件内容
这两天一直在学习如何使用c++遍历文件夹.读取文件内容和写入文件. 话不多说,直接上代码 /* * 文件功能:递归遍历文件夹,遍历文件夹及其子文件夹和文件.打印文件夹名称.文件名称和文件数目 * * ...
Vue项目build后静态资源文件路径或新建文件夹图片路径找不到的问题
问题描述:使用vue-cli脚手架工具生成的vue项目,使用npm run build后生成的文件直接双击打开白屏一片. 解决方案: 第一步:修改build文件夹下utils.js,在以下位置加入 i ...
java 运行os文件路径_Java获取文件路径的几种方式
关于绝对路径和相对路径: 绝对路径就是你的主页上的文件或目录在硬盘上真正的路径,(URL和物理路径)例如:C:xyz est.txt 代表了test.txt文件的绝对路径. http://www.su ...
stm32cubemx打开头文件路径错误_prt文件右键打开方式没有NX软件的解决方案
提示:点击上方"NX网"↑ 免费订阅关注老叶 1 网友求助老叶,我prt文件的打开方式里面没有UG,按照你的方法:选择ugs_router.exe也没用,会出现Router ...
java文件路径转义_java文件路径中“\”和“/”的区别
java文件路径中"\"和"/"的区别发布时间:2020-06-25 17:51:22 来源:亿速云阅读:189 作者:Leah 本篇文章为大家展示了jav ...
html中怎样导入css文件路径,前端——css文件引入的路径问题
上一篇我们说到引入css文件的三种方式,而其中的外部样式,也就是外部引用样式需要用到link标签来写.关于link的属性我们在这详细说明. 一.引入标签及其样式关于link的属性最主要的就是&quo ...
linux中的变量文件路径,Linux库文件和Shell可执行程序命令文件搜索路径变量的设置...
一.库文件的搜索路径: 1.在配置文件/etc/ld.so.conf中指定动态库搜索路径(需要添加其它库文件的路径,在文件的最后添加具体的路径即可 [ 如:/usr/local/lib ],添加后保存 ...

js根据本地文件路径上传文件（流上传）

js根据本地文件路径上传文件（流上传）相关推荐

最新文章

热门文章