Android developers use webuploader to solve the bugs encountered in uploading pictures by Android wechat browser

Let's first analyze the reasons for the picture bug uploaded by wechat browser

Wechat uses its own X5 kernel browser in the new version, while it may be the native browser of Android in the older version. I don't know much about the specific environment, but after the test of many Android models, the scheme I adopted can basically ensure the successful upload of wechat browser in Android. Apple has no problem, because the IOS client of wechat uses the safari kernel, there are no pits, and the effect is the best.

Here is a link to the official issues of webuploader about mobile terminal adaptation. The method provided is indeed effective, but the solution is not clearly shown. From the issues, several users can know how to modify it.

Problems encountered at the beginning

environment

Spring MVC [v 4.08] is used in the background and an open source HTML5 framework is used in the front end

problem

IOS can upload perfectly. More than half of Android phones do not support it. There is a problem that the progress bar is stuck, the pictures cannot be uploaded successfully, and only pictures in PNG format can be uploaded (later proved to be caused by compression failure, which is pointed out in detail in the solution). After publishing to the server for official operation, I found that some users only filled in text information and could not upload pictures, which was not good for statistical data, but such a bug rate was obviously not good. Next, I will give my solution. After actual testing, it should be no problem, and it is not guaranteed to be completely effective, because the principle is not very clear and is only for reference.

Subsequent solutions

Step 1: sendasbinary: true

First, according to the first solution given in issues, I set sendasbinary: true. A 500 error will be generated without any modification in the background, but the problem of stuck progress bar is solved at this time (of course! The direct upload of pictures fails!)... According to the answer of 2betop in issues, obtaining files should be the binary stream of directly obtaining files at this time.

The previous way to get pictures was to use the multiparthttpservletrequest provided by spring to convert the instance request of HttpServletRequest, and then obtain the information of multiple files. The code below is based on the actual code by deleting unnecessary details.

This is the original acquisition method. When 500 reports an error, it indicates that the first line of code is wrong and cannot be converted, because at this time, webuploader does not upload files using content type: multipart / form data after setting sendasbinary: true, but content type: application / ocet stream, which is also written in the source code, However, this field is not seen in the actually obtained request header, but only the type of image. The following shows the request information I saved using Chrome's devtools, and only the field value in the headers is pasted (a request is made for the same upload API):

500 request header in case of error

Request headers uploaded successfully without modifying sendasbinary: true

Compare the differences between the two and find the differences:

Content type: after it is modified to sendasbinary: true, this value becomes image / jpeg, while it was multipart / form data before. Therefore, multiparthttpservletrequest can no longer be used, and the back-end acquisition is changed to obtain the file stream.

Querystring: after binary upload is enabled, parameters are directly added to the URL.

Bodysize: becomes 0 after enabling, but not before enabling

First modify the back-end acquisition method, and the code is changed as follows:

At this time, the back-end can get the pictures uploaded by the front-end. The IOS model (iPhone 6S) still has no problem. There is no problem for Android to upload pictures in PNG format, but JPG still cannot be uploaded. At the back end, print the headers of the request. It is found that the content type will be lost when the Android model uploads JPG pictures, and the value is empty. Combined with the judgment in issues, maybe there is a problem with the Android model when compressing JPG format pictures. Solve it first and then try again!

Step 2: add Android patch

According to the official instructions, webuploader.custom.js is used, in which Runtime / HTML5 / Android patch.js is packaged.

Then, without modifying any code, after the test of five mobile phones and the test of new and old models: Huawei glory, Meilan, Lenovo, etc., Android can upload pictures freely in wechat. This is a big pit! The reason why the picture in JPG format could not be uploaded was that there was an error in compressing the picture in JPG format, resulting in the progress bar stuck and the upload failed.

Summarize the use experience

According to the above summary, I think next time I should be able to use this experience again to solve the pit of uploading pictures on wechat ~ I also know how to find the cause of the bug from the request headers. Webuploader is an excellent open-source plug-in, and the source code is also well-organized, clear and easy to read, although I haven't finished reading it. Now it's easier and easier to read the framework source code. Come on, the next goal is to learn react.js.

The above is what Xiaobian introduced to you. Android development uses webuploader to solve the bugs encountered in uploading pictures by Android wechat browser. I hope it will be helpful to you. If you have any questions, please leave me a message and Xiaobian will reply to you in time. Thank you very much for your support for the programming tips website!