layui+springmvc實現文件異步上傳

一.單文件上傳

前端代碼

 <div class="layui-upload">
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1">
            <p id="demoText"></p>
        </div>
        <button type="button" class="layui-btn" id="upload_btn">上傳圖片</button>

 </div>

layui.use('upload', function() {
    var $ = layui.jquery
        , upload = layui.upload;

    //普通圖片上傳
    var uploadInst = upload.render({
        elem: '#upload_btn'
        , url: '/uploadImg'
        , before: function (obj) {
            //預讀本地文件示例，不支持ie8
            obj.preview(function (index, file, result) {
                $('#demo1').attr('src', result); //圖片鏈接（base64）
            });
        }
        , done: function (res) {
            //如果上傳失敗
            if (res.code === 0){
                return layer.msg('文件上傳成功!');
            }
            if (res.code === 2) {
                return layer.msg('不支持該上傳類型');
            }
            if (res.code === 3) {
                return layer.msg('文件為空');
            }else{
                return layer.msg('文件上傳異常');

            }
            //上傳成功
        }
        , error: function () {
            //演示失敗狀態，並實現重傳
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-mini demo-reload">重試</a>');
            demoText.find('.demo-reload').on('click', function () {
                uploadInst.upload();
            });
        }
    });
});

 

后端代碼

在這邊遇到一些問題：

1.springmvc的xml需要配置文件上傳的類，否則會接收不了上傳的文件

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 設置上傳文件最大尺寸，單位為B -->
        <property name="maxUploadSize" value="1000000000" />
    </bean>

2.接收文件需要用@RequestParam("file")指定參數名稱，layui默認文件上傳的name是file

3.獲取項目的絕對路徑並拼接成新的圖片地址

@Controller
public class FileUploadController {
    @RequestMapping("/uploadImg")
    @ResponseBody
    public RetResult upload(@RequestParam("file") MultipartFile multipartFile, HttpSession session){

        if (!StringUtils.isEmpty(multipartFile) && multipartFile.getSize()>0){
            String filename = multipartFile.getOriginalFilename();
            String suffix = filename.substring(filename.lastIndexOf(".") + 1);
            if (filename.endsWith("jpg")||filename.endsWith("png")){

                String realPath = session.getServletContext().getRealPath("/")+"/image/"+new Date().getTime()+"."+suffix;
                File newfile = new File(realPath);
                try {
                    multipartFile.transferTo(newfile);
                    return RetResult.successRet(null);
                } catch (IOException e) {
                    e.printStackTrace();
                    return RetResult.errorRet(1,"文件上傳異常");
                }
            }else {
                return RetResult.errorRet(2,"不支持該上傳類型");
            }
        }else {
            return RetResult.errorRet(3,"文件為空");
        }

    }
}