Python + ueditor + qiniu cloud storage integration, pythonueditor

Source: Internet
Author: User

Python + ueditor + qiniu cloud storage integration, pythonueditor

Development Environment: python pyramid.

Reference: http://developer.qiniu.com/docs/v6/sdk/python-sdk.html,http://my.oschina.net/duoduo3369/blog/174655


The ueditor must be integrated into the website in the project, but there is a problem with image uploading. Therefore, the client (end user) => qiniu => Business Server is used to process images. Detailed procedures: Explain. The process is as follows:


The following are several key steps:

Generate a token using the signature to configure the Request Path of the Project Server:/ueditor/uptoken to generate an uptoken.
@ View_defaults (route_name = 'uedit') class UeditorView (object): def _ init _ (self, request): self. request = request self. db = request. db qiniu. conf. ACCESS_KEY = "your access_key" qiniu. conf. SECRET_KEY = "your secret_key" self. bucket_name = "Your qiniu space name" @ view_config (renderer = 'jsonp', match_param = ('Action = uptoken') def uptoken (self): policy = qiniu. rs. putPolicy (self. bucket_name) token = policy. token () return dict (token = token) @ view_config (renderer = 'jsonp', match_param = ('Action = imgmanage') def imgmanage (self): pass
There is also a/ueditor/imgmanage for image management. This is not done yet. Install the qiniu package with easy_install and import it before use.
Configuring ueditor upload requests I use the ueditor1_2_6_1-jsp-utf8 version. The change is to add a form in the body to the dialogs/image/image.html file to upload the token to the qiniu Server:
<input id="qiniu_token" type="hidden" name="token" />

Add the following code to the javascript tag to obtain the uptoken from the Project Server:
        $(function(){            $.get("/ueditor/uptoken", function(data) {                $("#qiniu_token").val(data["token"]);            });        });
Then, click event $ G ("upload"). onclick In the upload button to add the token parameter:
var postParams = {                    "dir":baidu.g("savePath").value,                    "token":$("#qiniu_token").val()//for qiniu yun token                };

You also need to modify the ueditor. config. js file under ueditor and modify the Image Upload configuration in window. UEDITOR_CONFIG:
Window. UEDITOR_CONFIG = {// Add a path for the editor instance, which cannot be annotated with UEDITOR_HOME_URL: URL // Image Upload configuration area, imageUrl: "http://up.qiniu.com/" // Image Upload submit address, imagePath: "http://shikeim.qiniudn.com/" // Picture Correction address, which is the address of qiniu cloud application space, imageFieldName: "file" // qiniu need to be changed to file
In this way, the image can be uploaded to qiniu ECs normally. It took a long time to display the image in ueditorand found that there is a callback function object callbacks under image.html. This is the callback function for successful uploads:
// UploadCompleteCallback: function (data) {try {var info = eval ("(" + data. hash + ")"); info & imageUrls. push (info); selectedImageCount --;} catch (e) {console. log ("excetion! Up load failed ...");}},

However, in fact, the qiniu cloud image was successfully uploaded, but the response was the uploadErrorCallback upload failure callback function. So I commented out the original uploadErrorCallback and wrote it again:
// Qiniu yun upload... uploadErrorCallback: function (data) {try {var info = eval ("(" + data.info + ")"); imgurl = {normal: info ['hash'], small: info ['hash'] + '-small'}; imageUrls. push (imgurl); // console. log (imageUrls); selectedImageCount --;} catch (e) {console. log ("excetion! Up load failed ...");}},
Imgurl is the name of the server-side image file returned by qiniu cloud. On qiniu cloud, I configured the uploaded images to have the original normal version and the thumbnail version small. Both of them are returned, easy to process in the editor. After the change, the image can be inserted, but it cannot be correctly displayed. The review element shows that the image name is undefined, so you can view the image again. js source code, found that the inserted image is the insertBatch function, so it should be:
/*** Insert multiple images */function insertBatch () {if (imageUrls. length <1) return; var imgObjs = [], align = findFocus ("localFloat", "name"); for (var I = 0, ci; ci = imageUrls [I ++];) {var tmpObj = {}; console. log (ci); tmpObj. title = ci. title; tmpObj. floatStyle = align; // modify the address data during display. If the absolute address of the image is returned in the background, tmpObj does not need to be corrected here. _ src = tmpObj. src = editor. options. imagePath + ci. small; // use the thumbnail imgObjs. push (tmpObj);} insertImage (imgObjs); hideFlash ();}
Now the image is successfully integrated. However, some small details need to be improved.
To sum up the problems, first check them online. The purpose of the query is not to find the answer, but to find the way of thinking. After reading the document, you can find the answer in the source code.







What is the difference between upyun storage and qiniu cloud storage?

Unique upload acceleration capability. Other cloud storage services only accelerate download (CDN ). Some claim to support upload acceleration, in fact, it is only a proxy node for upload. However, qiniu is the first distributed storage in the world to adopt a multi-IDC architecture. When data is uploaded to a local data center, it is accelerated to the extreme.
The unique resumable upload function. You no longer need to start all over again when the network is not running. No matter how bad the network is (especially 3G/2G mobile network), no matter how large the file is, we can ensure that your data is sent to the server. There is still no other cloud storage in China.
CDN integration. Qiniu has integrated four cdns, including chinacache and chinanetcenter. The total number of nodes has exceeded 1000 IDCs, which makes self-built cdns far from satisfactory. We don't re-invent the wheel. However, we need to move CDN from high-end to civilian. Why can only large companies enjoy the benefits of CDN? With qiniu, you can enjoy high quality as a blogger. Qiniu also helped you perform intelligent CDN quality monitoring. In case of a local node problem in a CDN, qiniu can automatically switch the region to another CDN. The entire process is transparent, saving you time and effort.
With unique image storage, you only need one click to experience qiniu cloud storage.
Streaming Media (Audio and Video Processing) support. This is currently the first cloud storage in China. Quietly tell you that the recent audio and video support will be significantly updated.
The cascade of data processing functions (that is, pipelines ). The image is scaled down and then watermark, which is a typical case of the pipeline function.
Large file support. Qiniu cloud storage single file supports up to 1 TB (tell me if it is not enough ).

Zhimeng dedecms integrates qiniu cloud storage

Sorry, I have never heard of it.
 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.