wangEditor上傳圖片問題

Geek WXC發表於2020-11-05

文章目錄

1 問題介紹

目前就論國內富文字編輯器有N多種，但是輕量級的wangEditor擁有簡約風格、簡單易用的特點，深深吸引了我。官網文件地址
壓縮版 wangEditor.min.js 連結
未壓縮版 wangEditor.js連結註釋4197行同樣解決問題哦
此版本為wangeditor@4.2.2
在這裡插入圖片描述

如此小巧的好用的富文字編輯器，卻讓我使用出來了問題，沒錯，就是上傳圖片的問題，下面說下我使用出來的問題。

當我上傳一張圖片時，我的圖片名字可以通過editor.config.uploadFileName = 'your-custom-fileName'來指定名稱（此程式碼在官方文件中的上傳圖片->自定義fileName可以檢視，同樣我們也可以限制傳入圖片的數量，不過多介紹，詳看官方文件），在使用spring mvc的controller中我們可以指定對應的名稱進行接受該圖片。

而當我使用wangEditor上傳多張圖片時，它便會出現錯誤，原因是原始碼將你的名字後面預設拼接了一個index，它是從1一次開始遞增的，即當你有三招那個圖片時，你原本的名字為file的話，當你選中三張圖片時，這三張圖片的名字依次為file1,file2,file3，此時你在controller接受引數就不太好用了，既然你通過後臺的java程式碼解決不了此類問題，那隻能通過js來解決了。

說了這麼多，想必大家已經明白我出現的問題和我解決的思路了，那我就從零開始一步一步使用wangEditor了。

2 必要的java程式碼

2.0 基礎配置

擔心讀者摸不著頭腦，才＋的2.0，如果依賴和配置檔案已經處理完畢，則2.0可以忽略。

2.0.1 引入依賴

<!-- json的依賴 -->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.11.2</version>
</dependency>
<!-- 上傳檔案 -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.4</version>
</dependency>

2.0.2 mvc.xml

<!-- 配置上傳檔案的支援 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="defaultEncoding" value="utf-8"/>
</bean>

2.1 封裝wangEditorVO類

說必要也是有原因的，首先當我們上傳圖片後，server會返回一個帶有格式的資料（點選官網檢視），即{"errno":0,"data":"地址1","地址2","..."}，這就需要我們定義一個wangEditorVO類，用來封裝其返回的資料。
程式碼如下

package com.chao.vo;

public class WangEditorVO {
    private Integer errno;
    private Object data;

    public Integer getErrno() {
        return errno;
    }

    public Object getData() {
        return data;
    }

    public static WangEditorVO success(Object data) {
        WangEditorVO wangEditorVO = new WangEditorVO();
        wangEditorVO.errno = 0;
        wangEditorVO.data = data;
        return wangEditorVO;
    }

    public static WangEditorVO error(Integer errno, Object data) {
        WangEditorVO wangEditorVO = new WangEditorVO();
        wangEditorVO.errno = errno;
        wangEditorVO.data = data;
        return wangEditorVO;
    }
}

2.2 上傳圖片的程式碼

既然封裝返回的資料格式，那我們前臺頁面jsp提交的資料到後臺controller進行處理，下面是上傳檔案的controller類，我們需要接受圖片，進行存入指定位置（我是以本地磁碟為例，然後存入nginx），如下程式碼：

package com.chao.controller;

import com.chao.vo.ServerResponse;
import com.chao.vo.WangEditorVO;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.*;

@Controller
@RequestMapping("/file")
public class FileUploadController {

//    private static final String PRODUCT_FILE_PREFIX = "D:\\IO\\shop\\shopImage\\";
//    private static final String SERVER_PREFIX = "http://localhost:8888/";

    @Value("${PRODUCT_FILE_PREFIX}")
    private String PRODUCT_FILE_PREFIX;
    @Value("${SERVER_PREFIX}")
    private String SERVER_PREFIX;

    @PostMapping("/wangUpload")
    @ResponseBody
    public WangEditorVO wangUpload(MultipartFile[] file) throws IOException {
        //當file為空時
        if (file == null || file.length == 0) {
            return WangEditorVO.error(1, "無圖片資訊");
        }

        //存入資料庫的檔案地址集合
        List<String> pathList = new ArrayList<>();
        for (MultipartFile multipartFile : file) {
            //獲取檔名
            String name = UUID.randomUUID().toString();
            //拼接完整的 存放圖片地址，即：D:\\IO\\shop\\shopImage\\檔名.字尾名
            File path = new File(PRODUCT_FILE_PREFIX + name + getSuffix(multipartFile));
            //將圖片存放到path路徑下
            multipartFile.transferTo(path);
            //拼接完整的 訪問圖片地址，即：http://localhost:8888/檔名.字尾名
            pathList.add(SERVER_PREFIX + name + getSuffix(multipartFile));
        }

        return WangEditorVO.success(pathList);
    }

    /**
     * 獲取檔案的字尾名
     *
     * @param multipartFile 上傳的檔案
     * @return 檔案的字尾名
     */
    private String getSuffix(MultipartFile multipartFile) {
        //獲取完整的檔名
        String fileName = multipartFile.getOriginalFilename();
        //擷取字尾
        String fileSuffix = fileName.substring(fileName.lastIndexOf("."));
        return fileSuffix;
    }
}

3 解決前臺上傳圖片的問題

前面話說那麼多，純碎是為了鋪墊，重點是解決上傳圖片的問題，解決該問題有兩種方式，一種是我們自己定義上傳圖片推薦，另一種是註釋原始碼的第4197行程式碼（name = name + (index + 1);），選擇第一種方式時，我們先介紹上傳單張圖片，其次介紹上傳多張圖片。

3.1 上傳單張圖片

3.1.1 程式碼展示

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>測試wangEditor</title>
</head>
<body>

<%-- 富文字編輯器 --%>
<div id="details"></div>
<%-- 點選按鈕 --%>
<button type="button" id="get-html">點選獲取富文字編輯器的內容</button>

<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/wangEditor.min.js"></script>
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#details')

    // 配置 富文字編輯器 上傳圖片的介面
    editor.config.uploadImgServer = '${pageContext.request.contextPath}/file/wangUpload';
    //設定上傳圖片http請求引數名，
    editor.config.uploadFileName = 'file';
    // 一次最多上傳圖片的數量
    editor.config.uploadImgMaxLength = 1;
    //富文字編輯器提示資訊
    editor.config.placeholder = '親，請記得編輯你的內容哦';
    editor.create();


    $('#get-html').click(function () {
        var details = editor.txt.html();
        console.log(details);
    })
</script>
</body>
</html>

3.1.2 效果展示

在這裡插入圖片描述

3.2 上傳多張圖片

3.2.1 程式碼展示

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>測試wangEditor</title>
</head>
<body>

<%-- 富文字編輯器 --%>
<div id="details"></div>
<%-- 點選按鈕 --%>
<button type="button" id="get-html">點選獲取富文字編輯器的內容</button>

<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
<script src="${pageContext.request.contextPath}/static/js/wangEditor.min.js"></script>
<script type="text/javascript">
    const E = window.wangEditor
    const editor = new E('#details')

    //自己定義上傳的方法
    editor.config.customUploadImg = function (resultFiles, insertImgFn) {
        // resultFiles 是 input 中選中的檔案列表
        // insertImgFn 是獲取圖片 url 後，插入到編輯器的方法

        //建立 FormData 物件來處理資料：鍵值對的形式，鍵可以重複
        var formData = new FormData();
        for (var i = 0; i < resultFiles.length; i++) {
            //將表單中的資料取出來，新增到file中
            formData.append("file", resultFiles[i]);
        }
        //使用AJAX上傳圖片
        $.ajax({
            url: '${pageContext.request.contextPath}/file/wangUpload',
            type: "POST",
            data: formData,
            async: false,//不傳送非同步請求
            cache: false,//瀏覽器將不快取此頁面
            //不設定Content-Type時，瀏覽器的值: application/x-www-form-urlencoded; charset=UTF-8
            //設定contentType: false時，瀏覽器的值：application/json
            contentType: false,
            processData: false,//我們需要傳送DOM資訊
            success: function (res) {
                //處理成功後
                if (res.errno == 0) {
                    for (var j = 0; j < res.data.length; j++) {
                        // 上傳圖片，返回結果，將圖片插入到編輯器中
                        insertImgFn(res.data[j]);
                    }
                } else {
                    alert(res.msg);
                    return;
                }
            }
        });
    }
    editor.create();


    $('#get-html').click(function () {
        var details = editor.txt.html();
        console.log(details);
    })
</script>
</body>
</html>

3.2.2 效果展示

在這裡插入圖片描述

相關文章