富文字編輯器WangEditor,實現圖片上傳OSS雲端儲存
阿新 • • 發佈:2019-01-04
首先,下載WangEditor外掛,下載地址:https://github.com/wangfupeng1988/wangEditor/releases,下載最新的就好了,使用文件地址:
我們也可以選擇,自定義選單選項(選擇選項,傳入我們需要的值)
第二步,解壓檔案,我們需要的只是release中的檔案,將它放到我們專案中的靜態檔案中,然後頁面中引入wangEditor.js檔案。
第三步,使用。先簡單介紹一下該js檔案。
建立富文字:
var E = window.wangEditor; var editor = new E('#editor'); // editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 儲存圖片 editor.customConfig.uploadImgServer = '/wangEditor/saveImg'; //上傳圖片到伺服器 editor.customConfig.uploadFileName = 'myFileName'; editor.customConfig.uploadImgMaxSize = 20 * 1024 * 1024;//設定圖片大小為20M editor.customConfig.uploadImgTimeout = 1000000; //圖片上傳超時限制10s editor.customConfig.menus = [ 'head', // 標題 'bold', // 粗體 'italic', // 斜體 'underline', // 下劃線 'strikeThrough', // 刪除線 'foreColor', // 文字顏色 'backColor', // 背景顏色 'list', // 列表 'justify', // 對齊方式 'image', // 插入圖片 'code', // 插入程式碼 'undo', // 撤銷 'redo' // 重複 ]; editor.create();
其中id為editor是我們要放入富文字的父元素。
預設富文字的選單選項是所有選單
menus: ['head', 'bold', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor', 'link', 'list', 'justify', 'quote', 'emoticon', 'image', 'table', 'video', 'code', 'undo', 'redo']
我們也可以選擇,自定義選單選項(選擇選項,傳入我們需要的值)
editor.customConfig.menus = [];
注意:所有屬性值定義一定要在建立之前定義。
第四步,圖片上傳
editor.customConfig.uploadImgServer = '/wangEditor/saveImg'; //上傳圖片到伺服器
editor.customConfig.uploadFileName = 'myFileName';
定義上面兩條屬性,其中uploadImgServer為後臺接收地址,uploadFileName為後臺接受檔名字第五步,後臺接收圖片並上傳至OSS雲端儲存
匯入OSS包
建立OSS例項,接收圖片資料,並上傳至OSS<dependency> <groupId>com.aliyun.oss</groupId> <artifactId>aliyun-sdk-oss</artifactId> <version>2.2.3</version> </dependency>
@RequestMapping(value = "saveImg", method = RequestMethod.POST)
@ResponseBody
public JSONObject uploadImgToOSS(HttpServletRequest request, HttpServletResponse response) {
JSONObject jsonObject=new JSONObject();
try {
request.setCharacterEncoding("UTF-8");
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
Part part = null;
try {
part = request.getPart("myFileName");// myFileName是檔案域的name屬性值
} catch (IOException e) {
e.printStackTrace();
} catch (ServletException e) {
e.printStackTrace();
}
// 包含原始檔名的字串
String fi = part.getHeader("content-disposition");
// 提取檔案拓展名
String fileNameExtension = fi.substring(fi.indexOf("."), fi.length() - 1);
// 生成實際儲存的真實檔名
String realName = UUID.randomUUID().toString() + fileNameExtension;
// 圖片存放的真實路徑
String realPath = "http://windyeel.oss-cn-shanghai.aliyuncs.com/wangEditor/" + realName;
// 將檔案寫入指定路徑下
OSSClient client = new OSSClient(endpoint, accessId, accessKey);
String dir = "wangEditor/";
String ossUrl = "";
try {
InputStream inputStream = part.getInputStream();
ossUrl = dir + realName;
client.putObject("windyeel", ossUrl, inputStream);
} catch (Exception e) {
e.printStackTrace();
}
client.shutdown();
// 返回圖片的URL地址
JSONArray jsonArray=new JSONArray();
jsonArray.add(realPath);
jsonObject.put("errno",0);
jsonObject.put("data",jsonArray);
return jsonObject;
}
注意點:1、myFileName是剛剛設定的uploadFileName2、endpoint是OSS地址: oss-cn-shanghai.aliyuncs.com,accessId是使用者名稱,accessKey是密碼;
3、realPath:圖片真實儲存路徑,需要返回給前臺
4、返回圖片地址,json的鍵必須為data
第六步,前臺接收到圖片真實地址,這時候你就可以將地址儲存到資料庫中,而不用將整個圖片裝換成位元組碼存到資料庫中,避免了資料庫讀取耗費的時間
注意:大圖片上傳可能會失敗,需要設定上傳檔案大小,請檢視博主其他文章。
如果覺得OK,請點個贊吧!