閑聊

還記得當時經(jīng)理說你可以在這個表格里面加個圖片上傳功能 這樣方便讓用戶用來更換頭像,依然記得當時整個模塊都弄好了這怎么辦難搞阿,沒辦法再難搞也得搞 搞了一下午硬生生擠出了一塊(也為我后續(xù)埋下了一個坑,想知后續(xù)如何請看下篇) 話不多說給兄弟們展示

前端的代碼Layui官網(wǎng)上也有,大家可以參考一下(主要是后端比較難實現(xiàn),話不多說 小二上代碼)

div

<div class="layui-form-item" style="padding-right: 50px;">
        <div class="layui-form-item">
            <label class="layui-form-label">作者頭像</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="upload1">上傳圖片</button>
                <input type="hidden" id="img_url" name="img" value=""/>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" width="200px" height="120px" id="demo1"/>
                    <p id="demoText"></p>
                </div>
            </div>
        </div>

js里的

<script src="../../js/jquery-3.4.1.min.js"></script>//換成自己的js路徑
    <script src="../../layui/layui.js"></script>//換成自己的Layui路徑
<script>
   // 文件上傳
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //普通圖片上傳
        var uploadInst = upload.render({
            elem: '#upload1'
            ,url: '/EmployeeController/uploadFile' //改成您自己的上傳接口
            ,before: function(obj){
                //預讀本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //圖片鏈接（base64）
                });
            }
            ,done: function(res){

                //如果上傳失敗
                if(res.code > 0){
                    layer.msg('上傳失敗');
                }
                //上傳成功
                layer.msg('上傳成功');
                //將圖片的名字放在表單中，添加的時候得放在數(shù)據(jù)庫里面
                $(function(){
                  var adminImg=$("#fileName").val(res.msg);
                    //alert('賦值成功');
                    alert("adminImg:"+adminImg);
                })
            }
            ,error: function(){
                //演示失敗狀態(tài)，并實現(xiàn)重傳
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上傳失敗</span> <a class="layui-btn layui-btn-xs demo-reload">重試</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
    });
    </script>

真正的主菜來了

Controller里的

 //圖片上傳
    @ResponseBody
    @RequestMapping("/uploadFile")
    public JSON uploadFile(MultipartFile file, HttpServletRequest request) {
        JSONObject json = new JSONObject();
        //路徑
        //System.getProperty("file.separator")文件執(zhí)行符:\\
        String filePath = "E:"+System.getProperty("file.separator") + "idea/dika/src/main/webapp/addressimg/";//上傳到這個文件夾
        File file1 = new File(filePath);
        //如果沒有的話創(chuàng)建一個
        if (!file1.exists()) {
            file1.mkdirs();
        }

        //路徑+文件名
        //文件名：file.getOriginalFilename()
        String finalFilePath = filePath + file.getOriginalFilename().trim();
        File desFile = new File(finalFilePath);
        if (desFile.exists()) {
            desFile.delete();
        }
        try {
            file.transferTo(desFile);
            json.put("code", 0);
            //將文件名放在msg中，前臺提交表單時需要用到
            json.put("msg", file.getOriginalFilename().trim());

            JSONObject json2 = new JSONObject();
            json2.put("src", finalFilePath);
            json2.put("title", "");
            json.put("Data", json2);

        } catch (Exception e) {
            System.out.println(e.getMessage());
            json.put("code", 1);
        }
        System.out.println(json);
        return json;
    }

千萬不要忘了在maven中添加JSON依賴

<!--json依賴-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.75</version>
        </dependency>