koa2学习之旅----记一次图片上传bug排查-优快云博客

本文详细记录了一次在表单中上传图片时遇到的问题及解决过程。由于缺少了enctype属性，导致表单无法正确获取隐藏域的值。通过添加enctype=multipart/form-data属性，成功解决了图片上传的问题。

原始代码

{{include 'admin/public/header.html'}}

<body>
	{{include 'admin/public/nav_top.html'}}

	<div class="main-container" id="main-container">
		<script type="text/javascript">
			try { ace.settings.check('main-container', 'fixed') } catch (e) { }
		</script>

		<div class="main-container-inner">
			<a class="menu-toggler" id="menu-toggler" href="#">
				<span class="menu-text"></span>
			</a>

			{{include 'admin/public/nav_left.html'}}

			<div class="main-content">
				<div class="breadcrumbs" id="breadcrumbs">
					<script type="text/javascript">
						try { ace.settings.check('breadcrumbs', 'fixed') } catch (e) { }
					</script>

					<ul class="breadcrumb">
						<li>
							<i class="icon-home home-icon"></i>
							<a href="#">首页</a>
						</li>
						<li class="active">控制台</li>
					</ul><!-- .breadcrumb -->

					<div class="nav-search" id="nav-search">
						<form class="form-search">
							<span class="input-icon">
								<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
								<i class="icon-search nav-search-icon"></i>
							</span>
						</form>
					</div><!-- #nav-search -->
				</div>

				<div class="page-content">

					<div class="page-header">
						<h1>
							修改轮播图
						</h1>
					</div><!-- /.page-header -->

					<!--表格-->

					<div class="table-responsive">
						<form action="{{__HOST__}}/admin/focus/doEdit" method="post" class="form-horizontal" role="form" enctype="multipart/form-data">
							<div class="form-group">
								<label class="col-sm-2 control-label no-padding-right" for="title">标题:</label>
								<div class="col-sm-10">

									<input type="text" id="title" name="title" value="{{list.title}}" class="col-xs-10 col-sm-5" />
									<input type="hidden" name="id" value="{{@list._id}}" />
								</div>
							</div>
							<div class="form-group" style="height:120px">
								<label class="col-sm-2 control-label no-padding-right" for="pic">轮播图:</label>
								<div class="col-sm-10" style="height: 80px">
									<input type="file" id="pic" name="pic" class="col-xs-10 col-sm-5" />
									<br />
									<br />
									<img src="{{__HOST__}}/{{list.pic}}" alt="" style="width:80px;height:80px;float:left">
									<br />
									<br />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label no-padding-right" for="url">链接地址:</label>
								<div class="col-sm-10">
									<input type="text" id="url" name="url" class="col-xs-10 col-sm-5" value="{{list.url}}" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label no-padding-right" for="sort">排序:</label>
								<div class="col-sm-10">
									<input type="text" id="sort" name="sort" class="col-xs-10 col-sm-5" value="{{list.sort}}" />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label no-padding-right">状态：</label>
								<div class="col-sm-10">
									<label for="status1">已审核：</label><input type="radio" name="status" id="status1" value="1"
									 {{if list.status==1}} checked {{/if}} />
									&nbsp;
									<label for="status2">未审核:</label><input type="radio" name="status" id="status2" value="0"
									 {{if list.status==0}} checked {{/if}} />
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label no-padding-right" for="submit"></label>
								<div class="col-sm-10">
									<button type="submit" class="btn btn-primary">提交</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div><!-- /.main-content -->

		</div><!-- /.main-container-inner -->

		<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
			<i class="icon-double-angle-up icon-only bigger-110"></i>
		</a>
	</div><!-- /.main-container -->
	{{include 'admin/public/footer.html'}}
	{{include 'admin/public/footer_other.html'}}

	<script type="text/javascript">

		$(function () {


			function showErrorAlert(reason, detail) {
				var msg = '';
				if (reason === 'unsupported-file-type') { msg = "Unsupported format " + detail; }
				else {
					console.log("error uploading file", reason, detail);
				}
				$('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>' +
					'<strong>File upload error</strong> ' + msg + ' </div>').prependTo('#alerts');
			}

			$('#editor1').ace_wysiwyg({
				toolbar:
					[
						'font',
						null,
						'fontSize',
						null,
						{ name: 'bold', className: 'btn-info' },
						{ name: 'italic', className: 'btn-info' },
						{ name: 'strikethrough', className: 'btn-info' },
						{ name: 'underline', className: 'btn-info' },
						null,
						{ name: 'insertunorderedlist', className: 'btn-success' },
						{ name: 'insertorderedlist', className: 'btn-success' },
						{ name: 'outdent', className: 'btn-purple' },
						{ name: 'indent', className: 'btn-purple' },
						null,
						{ name: 'justifyleft', className: 'btn-primary' },
						{ name: 'justifycenter', className: 'btn-primary' },
						{ name: 'justifyright', className: 'btn-primary' },
						{ name: 'justifyfull', className: 'btn-inverse' },
						null,
						{ name: 'createLink', className: 'btn-pink' },
						{ name: 'unlink', className: 'btn-pink' },
						null,
						{ name: 'insertImage', className: 'btn-success' },
						null,
						'foreColor',
						null,
						{ name: 'undo', className: 'btn-grey' },
						{ name: 'redo', className: 'btn-grey' }
					],
				'wysiwyg': {
					fileUploadError: showErrorAlert
				}
			}).prev().addClass('wysiwyg-style2');

		})


	</script>

</body>

</html>