For Image Storage-record a UEditor source code modification, ueditor source code

For Image Storage-record a UEditor source code modification, ueditor source code

This article is copyrighted by the blog and the author Wu Shuang himself.

Preface

This is an era of data explosion, and everyone is used to browsing the fast information that graphic visualization brings to us. The storage and browsing of large images often become the bottleneck of Web servers. Imagine that if your Web server still stores a large number of images locally, and the main information on a single page is the image list, the bandwidth and disk I/O bottlenecks will inevitably emerge when the access volume increases. Then cause the Web server to slow, and then to do distributed file storage, if you achieve a simple multi file server storage, you can move to this: http://www.cnblogs.com/tdws/p/6231308.html, if you build a slightly more complex, even with processing image size, pixels, compression and cache, you can move the step Zimg http://zimg.buaa.us /.

I am currently using qiniu cloud storage, mainly favored by its capacity and CDN, as well as solutions to image slimming problems. Since the problem solved is the bottleneck of the Web server, you must use the js sdk, that is, JS directly transmits the file directly to qiniu cloud.

Why do I modify the source code?

In order to use JS to directly transfer files to cloud storage, instead of transmitting files to the web server, the web Server post files to cloud storage, because of the latter method, it is too unsatisfactory and too low.

In order to implement the first method, and upload to cloud storage must carry an authenticated uptoken to be considered as having permissions, You have to modify the source code, so that the uploaded file carries additional parameters.

This modification mainly enables UEditor to upload multiple files to cloud storage. The iframe Method for uploading a single file to UEditor has not been solved yet. However, with Multifile upload, it is not so important to upload a single file. In fact, the idea of implementation is very simple. Find all the Image Upload code, obtain the uptoken from the web server before uploading, and then carry it to ajax.

First, modify the image. js referenced in the Ueditor image pop-up box.

First, I will give the file name to a guid generated by JS simulation, then request the Token, and set it to synchronization. before uploading, I will send the token to the data carried by the ajax request. in this way, the upload permission problem is solved.

Step 2 is to modify the configuration, config. json, with emphasis on imageUrl and imageUrlPrefix.

Step 3: I found that when uploading multiple images, ueditor does not use my imageUrl, but still uses the default path for this project. So I searched for the source code, found the location, and made the following changes:

This method is called getActionUrl and adds a row for judgment. If the action is uploadImage, my imageUrl is used as the upload path without any splicing. The imageUrl is directly returned.

The pitfall is that the key name of the file parameter Uploaded By qiniu must be file.

In addition, Baidu rich text also requires the returned format of the service after you upload it, which is achieved by setting the cloud storage ReturnBody.

 

Efforts to upload a single image

After searching for a long time, you can find the source code of this Single Image Upload. You can see that it uses iframe to construct the form object. So the modification I made is to request the token and add an input to the success callback function, and use the token as the value to the input tag.

The callback function for uploading is as follows: this is the location where cross-origin exceptions are thrown. It has not been solved yet. If you must implement this function, you may need to refer to the document for Secondary Development of Baidu ueditor.

 

Conclusion

In fact, there is nothing wonderful, but I believe that there are more and more people using cloud storage, there will be some people who need it, give themselves a reference, also give others a reference.