springboot+layui中富文本编辑框的使用（二）——使用layui中neditor的图片上传

        好了上一篇说了大体情况，那这篇就直接上干货。

一、前端

1、html

<textarea  name="content" class="htmlBody" id="htmlBody0" style="height: 420px;"></textarea>

2、js

    /**
     * 自定义上传接口
     * 由于所有Neditor请求都通过editor对象的getActionUrl方法获取上传接口，可以直接通过复写这个方法实现自定义上传接口
     * @param {String} action 匹配neditor.config.js中配置的xxxActionName
     * @returns 返回自定义的上传接口
     */
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
        var picId = $("#picId").val();
        /* 按config中的xxxActionName返回对应的接口地址 */

        //自己项目的域名，每次访问都是以这个为准
        var addr = interface_uedit+ "?picId="+picId+"&Authorization=" + layui.sessionData("checkModel").Authorization;

        if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') {//对应neditor.config.js的name名称
            return addr;
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }

二、后台

1、controller

        因为本小编关于ftp上传已相关博文介绍了，所以在这里就不在赘述了。

    /**
     * 富文本编辑框图片上传
     * @param request
     * @param file
     * @return
     * @throws IOException
     */
    @RequestMapping("/uploadPicture")
    @ResponseBody
    public String uploadFile(HttpServletRequest request,
                             @RequestPart(value = "file") MultipartFile file,
                             @RequestParam(value = "picId")String picId) throws IOException {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS");
        String res = sdf.format(new Date());
        //文件上传 02是ftp形式上传至远程服务器
        Page pageInfo = uploadService.getUploadInfoByArticleId(file,picId,"02");
        List<Map<String,String>> data = pageInfo.getData();
        String url = "/this-upload/" + data.get(0).get("relativePath");
        //返回结果
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("code", 200);//0表示成功，1失败
        map.put("msg", "上传成功");//提示消息
        map.put("url", url);//图片url
        String result = new JSONObject(map).toString();
        return result;
    }

2、fegin设置

import com.base.support.model.Page;

import feign.codec.Encoder;
import feign.form.spring.SpringFormEncoder;
import org.springframework.cloud.openfeign.FeignClient;

import org.springframework.context.annotation.Bean;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

@FeignClient(name = "COMMON-UPLOAD",configuration = UploadService.MyConfig.class)
public interface UploadService {
    @RequestMapping(method = RequestMethod.POST,value = "/uploads",consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public Page getUploadInfoByArticleId(@RequestPart(value = "file") MultipartFile file,
                                         @RequestParam("masterId")String masterId,
                                         @RequestParam("storageType")String storageType);

    class MyConfig {
        @Bean
        public Encoder feignFormEncoder() {
            return new SpringFormEncoder();
        }
    }
}

        好了，到此就总结分享完了。