LayUI+图片上传详解(01)--前端的代码

　　LayUI+图片上传详解(01)--前端的代码

　　LayUI+ 图片上传详情

　　在一些网站背景中，经常会有上传图片的场景。比如我之前后台管理系统中的文章图片。

　　Layui的官方demo只有前端，所以先看一下前端代码。

　　01html 代码

　　首先是html部分，我这里用的是Layui的form，每个layui-form-item代表一行。

　　从代码中可以看出，有一个上传按钮触发上传动作，一个图片控件显示图片，一个隐藏控件接收上传图片在服务器上的路径（这个不是必须的，因为我下一个表单提交使用了data.field）。

　　02JS代码

　　接下来是JS代码。 JS代码部分主要是实现按钮提交动作和调用后台接口将图片保存到服务器。

　　上传必须被引用和初始化。然后制作上传方法的参数：

　　元素：按钮 ID

　　url：后台界面

　　before：上传前直接预览图片到图片控件，不管上传成功与否。

　　done：上传完成，指的是调用接口完成，其实可以分为上传成功和上传失败。可以根据 res 返回值进一步判断。

　　03 后台代码

　　我使用 MVC 框架作为后端。 LoginFilter 是登录认证，这里就不讲了。因为要返回Json数据，所以定义了一个JsonResult。

　　Request.Files 是此请求中提交的文件的内容。使用循环的原因是您可能会上传多个文件（下次）。循环的内容是先判断文件是否为空（或者添加一些其他的判断条件）。然后判断保存的路径是否存在，不存在则新建路径。

　　一般情况下，保存的文件最好按照时间或者其他规则重命名，这里我没有做。 path是服务器保存路径，uploadFile.FileName是上传文件的文件名，uploadFile.SaveAs(path)可以保存。我们要返回前端的路径是src。

　　如果保存成功，则Json中的code值为0，如果不成功则跳转到catch，code值为1，msg获取错误内容。

　　回到前端JS，在done中，要靠res.code来判断这次上传是否成功以及如何处理。图片的URL也返回给隐藏控件Url。

　　好的，这次就这样。如果您有任何问题，请与我联系。