文件上传学习中

关于文件上传

在最近的学习中,遇到了文件上传问题,然后在此记录一下,方便下次使用.

引入依赖

<!--添加servlet-api依赖-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.0.1</version>
            <scope>provided</scope>
        </dependency>
        <!--添加上传组件依赖-->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.2</version>
        </dependency>

映射,设定上传文件的大小

 <!--配置文件上传解析器-->
    <!--id 为为特定值-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--定义最大上传文件大小-->
        <property name="maxUploadSize" value="10000000"/>
    </bean>

上传文件的页面:
需要引入jquery-form.js

<form action="fileUpload" method="post" enctype="multipart/form-data">
      <input type="text" name="carName" value="" /><br>
      <input type="file" name="carPic" value="" /><br>
      <input type="submit" value="add"/>

  </form>

java代码的接收:

在这里插入代码片//carPic为所传文件input框的name值
    public static String fileUp(HttpServletRequest request, MultipartFile carPic) {
//上传图片到制定的路径下
        String realPath = request.getSession().getServletContext().getRealPath("/upload");
        System.out.println("上传文件存储在：" + realPath);
        File file = new File(realPath);
//       获取上传文件的原名
        String originalFilename = carPic.getOriginalFilename();
        //新文件名
        String fileName = UUID.randomUUID().toString() +
                originalFilename.substring(originalFilename.lastIndexOf("."));
        try {
//           将carPic对象含的文件流写入file目录下的fileName文件中
            carPic.transferTo(new File(file, fileName));
//            将 carName+fileName写入db中

            return "../upload/" + fileName;

        } catch (IOException e) {
            e.printStackTrace();
        }
        return null
                ;
    }

这样就可以将一个简单的文件写入到制定的文件目录下

此外,在此次项目中还涉及到一个,修改图片的情况,为了保证修改后图片能够成功更新,一下就是我的实现
我是用的是模态窗
由于这是其中的一段代码,查询显示并没有显示,目的是为了说明问题

<form id="upfrom"
      class="form-horizontal" enctype="multipart/form-data">
    <div class="modal fade" id="modalModify" style=" zindex:MAX">
<div class="form-group">
                        <label for="avatar" class="col-sm-2 control-label">头像</label>
                        <br/>
                        <div class="col-sm-4" style="width: 80px;height: 80px">
                            <input type="image" :src="userInfo.avatar" style="width: 80px;height: 80px;"
                                   id="avatar" name="avatar">
                        </div>
                        <div class="col-sm-4 pfilediv">
                            <input type="file" id="pfile" name="avatar" @change="qqqqq()"
                                   style="margin-top: 40px ; margin-left: 20px">
                        </div>
                    </div>
                       </div>
</form>
<script>


    var myObj2 = new Vue({
        el: '#modalModify',
        data: {
            userInfo: {}
        },
        methods: {
            qqqqq: function () {
                alert("aaa")
                var options = {
                    type: 'POST',
                    dataType: 'json',
                    url: '/user/upFile',
                    success: function showResponse(responseText) {
                        alert("来了,老弟")
                        if (responseText.code == 1) {
                            alert(responseText.info)
                            // carinfos.picture = responseText.info;
                            myObj2.userInfo.avatar = responseText.info;
                        } else {
                            alert(responseText.info);
                        }
                    },
                    error: function (xhr, status, err) {
                        alert("上传失败");
                    },
                    resetForm: true    // 成功提交后，重置表单填写内容
                };
                $("#upfrom").ajaxSubmit(options);

                /* $("#upfrom").submit(function () {
                     $(this).ajaxSubmit(options);
                     return false;   //防止表单自动提交
                 });*/


            }
        }
    })
</script>

   @RequestMapping(value = "/upFile", method = RequestMethod.POST)
    @ResponseBody
    public Msg2 upFile(HttpServletRequest request, MultipartFile carimg) {
        String fileName = FileUp.fileUp(request, carimg);
        System.out.println(fileName);
        if (fileName != null) {
            return new Msg2(1, fileName);
        }
        return new Msg2(0, "上传没有成功");
    }

这样差不多就能解决了