& #183; implement cross-domain Image Upload Based on thinkphp5.0 and Baidu editor UMeditor,

· Implement cross-domain Image Upload Based on thinkphp5.0 and Baidu editor UMeditor,

1. Download the source code of both;

2. Simple Configuration:

A. a thinkphp framework displays the front-end interface and works with the editor environment. The corresponding domain name is the http://tp.com;

 This is the front-end interface configuration, but I have to modify the URL configured in the umeditor. config. js file for a long time.

In my opinion, the local site domain name is configured to the www/tp5/public location. Now I want to add a path to the instance editor, and the file location of the editor is under the public:

In this case, the editor is displayed normally on the interface:

Next, we will consider uploading images. This step is not mentioned for the time being. Let's talk about API interface configuration first.

B. A thinkphp framework provides API calls. The built-in php Upload method is used. The corresponding domain name is http: // tp_api.com

Cross-origin operations are allowed in the entry file because of cross-origin reasons:

Modify the Image Upload method that comes with the editor

At this time, both sides have been configured. Now let's talk about the upload problem:

C. upload images-Cross-Origin

Instructions on online materials and official editor documents also indicate that cross-origin upload of a single image is not supported. Many of our friends have published their cross-origin upload solutions on the Internet. It may be successful in their respective development environments. But for me, I have to find another way.

I have referred to my suggestions from my friends and told me that I have benefited a lot. This is a URL link:Http://www.cnblogs.com/hpnet/p/6290452.html.

This is a solution to cross-origin upload:

However, this method cannot be used on my side. The front-end interface cannot use php for data conversion and transmission. [The specific reason is unclear ]. You can only consider modifying js to upload images.

That is, when you access this address, the image is successfully uploaded in the background. However, the returned json data cannot be received. The problem lies here. The error page is as follows:

The js related to the upload operation is dialog/image. js files, through actual tests, we know that one problem is that as long as a json array is assigned to the variable r, all the problems are solved:

The first idea is to use ajax to request data asynchronously. Request data again. When uploading images, save the returned json data to the session. When executing a js file, use ajax to request an interface across domains and return data.

The following js file configuration is available:

Corresponding interface [shown above]Pay attention to the request format of jsonp.:

In the actual process, js debugging is a big problem. The data returned asynchronously has a delay effect, and the corresponding operations must be put into the success method: one by one through breakpoint debugging. To find the problem.

Another problem is that the actual js Code process sequence must be clarified. It is very important to distinguish the logical relationship between codes.

Another problem is that the ajax request interface directly assigns a value to the variable r. Put the actual logical operation in sucess ,. However, the actual results are not normal. So the direction of thinking about the problem should be that the data is obtained, so it is only because the function operations in success are faulty. Find the crux of the problem. Use the breakpoint debugging that comes with the browser. Step by step. The problem will naturally come out.

 

At this time. Then upload the cross-origin image. Perfect.

 

 

 

Today, with the help of the great gods, we have solved the problem perfectly. I learned a lot .....