Preface
Recently, I arrived at a new company, just to meet the needs of image upload. Some of the previous image uploads are from the front end to the back end, and then the back end is uploaded to the server, or using 7niu cloud. This time, Alibaba oss, which is used by the company in a unified way, hasn't been used. I went online and looked up how the big guys did it, but found it very complicated and troublesome? So I wrote it myself and shared it with people in need.
code implementation
-
wangEditor introduction
- npm or cdn can be introduced https://www.kancloud.cn/wangfupeng/wangeditor3/332599)
- Instanced editor
- npm or cdn can be introduced https://www.kancloud.cn/wangfupeng/wangeditor3/332599)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>wangEditor demo</title> </head> <body> <div id="editor"> <p>Welcome to use <b>wangEditor</b> Rich Text Editor </p> </div> <!-- Note that only references are needed JS，No reference is required CSS !!!--> <script type="text/javascript" src="/wangEditor.min.js"></script> <script type="text/javascript"> var E = window.wangEditor var editor = new E('#editor') // Or var editor = new e (document. Getelementbyid ('editor ')) editor.create() </script> </body> </html>
-
Alioss SDK Introduction (also supports cdn or npm, I use cdn)
- <script type="text/javascript" src="js/aliyun-oss-sdk.min.js"></script>
-
Finally, write the upload logic in customUploadImg of wangEditor
- The parameters in new OSS can be passed to you in the background. Remember to insert the image after the upload. (what I'm going to introduce here is simple upload, segmentation and breakpoint upload documents are also written clearly: https://help.aliyun.com/document_detail/64047.html?spm=a2c4g.11186623.6.1195.45885966oMzAFz)
self.editor.customConfig.customUploadImg = function(file, insert) {//This should be placed in editor.create(); before and after which the uploaded file cannot be obtained console.log(file,"file")//It's an array, so file[0] should be used later var client = new OSS({ region: self.token.region, accessKeyId: self.token.accessKeyId, accessKeySecret: self.token.accessKeySecret, stsToken: self.token.stsToken, bucket: self.token.bucket }) //This is the way of synchronization // async function putBlob () { // try { // let result = await client.put(self.token.endpoint+'/math-editor/'+file[0].name, new Blob([file[0]])); // console.log(result); // insert(result.url) // } catch (e) { // console.log(e); // } // } // putBlob() //It's asynchronous client.put(self.token.endpoint+'/math-editor/'+file[0].name, file[0]).then(function (r1) { console.log('put success: %j', r1); return client.get(self.token.endpoint+'/math-editor/'+file[0].name); }).then(function (r2) { console.log('get success: %j', r2); insert(r2.res.requestUrls[0]) }).catch(function (err) { console.error('error: %j', err); }); }; self.editor.create() },
End
It's very simple. If there's any mistake in the article I took time to write on Monday morning, please correct it in time. I'll change it at any time and make progress together.