h5plus 文件上传示例，附node后台

最新推荐文章于 2023-10-08 16:58:49 发布

weixin_34185512

最新推荐文章于 2023-10-08 16:58:49 发布

阅读量924

点赞数

文章标签： java 移动开发 json

原文链接：https://my.oschina.net/cc4zj/blog/3001106

版权

为什么80%的码农都做不了架构师？>>>

前台代码

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <h1 class="mui-title">Uploader示例</h1>
		</header>
		<div class="mui-content mui-content-padded">
		    <button id="add_btn">添加图片</button>
		    <button id="upload_btn">上传图片</button>
		    <ul id="list"></ul>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();
			var filesData = [];
			var list = document.getElementById('list');
			
			// 添加图片
			document.getElementById('add_btn').addEventListener('tap', function () {
				plus.gallery.pick(
					function (files) {
						filesData = files.files;
						for (var i = 0; i < filesData.length; i++) {
							list.innerHTML += ("<li>" +filesData[i] + "</li>");
						}
					},function (error) {
						
					}, {
						animation: true,
						maximum: 9,
						multiple: true
					});
			});
			// 图片上传
			document.getElementById('upload_btn').addEventListener('tap', function () {
				if (filesData.length == 0) {
					return;
				};
				plus.nativeUI.showWaiting('图片上传中');
				var server = 'http://192.168.0.133:3000/upload';
				// 创建图片上传对象
				var task = plus.uploader.createUpload(
					server, 
					{method: "POST"}, 
					function (upload, status) {
						// 上传完成
						if (status == 200) { 
							mui.toast('图片上传成功')
						} else {
							mui.toast('图片上传失败')
						}
						plus.nativeUI.closeWaiting();
					}
				)
				// 添加接口需要的参数
				task.addData("userId", "caocong");
				// 添加上传需要的文件路径
				for (var i = 0; i < filesData.length; i++) {
					var file = filesData[i];
					task.addFile(file, {key: 'file' + i} );
				}
				task.start();
			});
		</script>
	</body>

</html>

后台代码

var express = require('express');
var router = express.Router();
var multer = require('multer')

// 设置硬盘存储
var storage = multer.diskStorage({
  //设置上传后文件路径，uploads文件夹会自动创建。
     destination: function (req, file, cb) {
         cb(null, './upload')
    }, 
  //给上传文件重命名，获取添加后缀名
   filename: function (req, file, cb) {
      var fileFormat = (file.originalname).split(".");
      cb(null, file.originalname + '_' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
   }
}); 

// 文件类型过滤
function fileFilter (req, file, cb) {
  // 这个函数应该调用 `cb` 用boolean值来
  // 指示是否应接受该文件
  if (file.mimetype.indexOf('image') < 0) {
    // 拒绝这个文件，使用`false`，像这样:
    cb(null, false)
  } else {
    // 接受这个文件，使用`true`，像这样:
    cb(null, true)
  }
}

//添加配置文件到muler对象。
var upload = multer({storage: storage, fileFilter: fileFilter}).any();

router.post('/', function (req, res) {
  upload(req, res, function (err) {
    if (err) {
      // 图片上传失败
      res.json({
        status: -1,
        msg: err
      })
    } else {
      // 图片上传成功
      // 获取前端传递的参数
      var userId = req.body.userId;
      // 获取图片信息
      var files = req.files;
      // 将文件信息保存到数据库中
      // db todo
      res.json({
        status: 0,
        msg: ''
      })
    }
  })
})

module.exports = router;

转载于:https://my.oschina.net/cc4zj/blog/3001106