[JavaScript知识库]layui中表单上传图片的方法

项目场景：

layui通过表单上传图片：
项目场景：项目练习时候遇到一个问题，在使用layui框架时在表单提交图片时遇到的问题。

思路：

因为表单的数据要提交到数据库中就需要考虑图片在数据库中的方式。

有两种存取方式：

1. 把图片直接以二进制形式存储在数据库中
2. 图片存储在磁盘上，数据库字段中保存的是图片的路径。
   

具体实现思路：

选用了第二种方式：
1.给layui中自带的上传图片模块单独写一个接口，
2.在图片时就访问这个接口，将图片以二进制的形式传到接口中处理。
3.在接口中将处理好的文件放到指定的文件路径下。
4.再回传一个json格式的数据，包含操作好的图片路径。
5.将图片路径赋值给表单中相应的项，然后提交表单。

具体代码：

HTML代码：

其中隐藏的input框用来放回传的图片路径，注意要给id

注意：查看时显示图片可以在form.val(‘表单’，function){}中用$('#demo1').attr('src','路径'+data.teaPhoto);

<input type="hidden" name="teaPhoto" id="teaimg">
            <div class="layui-upload">
                <label class="layui-form-label">照片</label>
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img style="height: 150px; width: 112px" class="layui-upload-img" id="demo1">
                    <p id="demoText"></p>
                </div>
                <div style="width: 95px;"></div>
            </div>

js代码

 layui.use('upload',function () {
   var upload = layui.upload;
    upload.render({
    elem: '#test1'
    ,url: '${pageContext.request.contextPath}/teacher/upload' //写自己接口的路径
    ,before: function(obj){
     obj.preview(function(index, file, result){
      $('#demo1').attr('src', result);
      });
      }
      ,done:function (res) {
              console.log(res)
               if(res.code<0){
                  return layer.msg('上传失败');
                 } 
               //成功
              var demoText = $('#demoText');
              demoText.html('<span style="color: #4cae4c;">上传成功</span>');//上传成功的提示消息

           var fileupload = $('#teaimg');
           fileupload.attr("value",res.src);//给input框赋值，src是回传的图片名称/路径
              }
             });
            })//文件上传

java代码

@Controller
@RequestMapping("/teacher")
@ResponseBody
@RequestMapping("/upload")
    public Map upload(@RequestParam(value="file") CommonsMultipartFile file){
        System.out.println(file.getOriginalFilename());
        String newFileName=file.getOriginalFilename();
        File file1 = new File("C:\\Users\\src\\main\\webapp\\images\\"+newFileName);

        try {
            file.transferTo(file1);
        } catch (IOException e) {
            e.printStackTrace();
        }
        Map<String,Object> map=new HashMap<>();
        map.put("code",1);
        map.put("msg","");
        map.put("src",newFileName);
        return map;
        //回传json格式的图片名称
            }

可能会遇到一些问题，参考一下解决方法

需要在pom.xml中导入上传文件
<dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency>
需要在dispatcher-servlet.xml配置

 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 设置请求编码格式-->
        <property name="defaultEncoding" value="UTF-8" />
    </bean>