• Umeditor cross-domain upload image based on thinkphp5.0 and Baidu editor

1, download the two source code;

2, simple configuration:

A. A set of thinkphp frameworks is a display front-end interface, paired with an editor environment. The corresponding domain name is http://tp.com;

This is the front-end interface configuration but also to modify the Umeditor.config.js file here to configure the URL, I think for a long time

That's what I thought. The local site domain name is configured to the Www/tp5/public location, now it is the instance editor plus a path, and the editor's file location is under public:

In this case the editor will display normally in the interface:

Okay, the next thing to consider is the image upload. This step is not to say for the time being. Let's talk about API interface configuration.

B. A set of Thinkphp frameworks provides API interface calls. Using the editor's own PHP upload method. The corresponding domain name is http://tp_api.com

Allow cross-domain operations within the portal file because of cross-domain considerations:

Modify the editor's own upload image method

By this time both sides have been configured, now for the upload problem:

C. Image upload--cross-domain

There is a description of the information on the Internet and the editing of the organ-side document also indicates that a single picture is not supported for cross-domain uploads. A number of small partners also published on the internet The cross-domain upload solution. May be successful in their own development environment. But to me, I can only go the other ways.

This is a reference to the advice of small partners, to me that the benefit of this is the URL:http://www.cnblogs.com/hpnet/p/6290452.html.

This is a way to resolve cross-domain uploads:

But on my side. This method is not available, and the front-end interface cannot use PHP for data conversion and transfer. "The specific reason is also unclear." Only consider modifying JS for image upload

That is, when you visit this address, the picture is uploaded successfully in the background. However, the JSON data returned is not acceptable. The problem is here. The error screen appears as follows:

In the upload operation is related to the JS is the Dialog/image/image.js file, through the actual test to know that a problem is as long as a JSON array assigned to the variable R all problems solved:

The first idea is to use AJAX to request data asynchronously. Re-request data once. The returned JSON data is stored in the session when the image is uploaded. When executing the JS file, use AJAX to request an interface across domains and return the data.

There is a configuration of the following JS file:

The corresponding interface "shows" very much attention to the JSONP request format :

The actual process of JS debugging is a big problem, the asynchronous return of the data has a delay effect, the corresponding operation must be put into the success method: Debugging a breakpoint through a search. Only to find the problem.

Another problem is to be sure to figure out the actual sequence of JS code flows. It is important to distinguish between the logical relationships between the code.

Another problem is that the initial idea is that the AJAX request interface return data is directly assigned to the variable R. Put the actual logical operation into the sucess. But the actual results are not normal. Then the direction of the thinking problem should be the data to get, then only the success inside the function operation out of the problem. To find the crux of the problem. Use the browser's own breakpoint debugging. Step by step to go down. The problem will come out naturally.

By this time. Then go to cross-domain image upload. Perfect.

Endure today, with the help of the great God, the perfect solution. Learned a lot ...

• Umeditor cross-domain upload image based on thinkphp5.0 and Baidu editor