Mobile end HTML5 picture display and uploading method based on VUE3 development

Abstract

The application discloses a mobile terminal HTML5 picture display and uploading method based on VUE3 development, and comprises the following steps: a picture display screen is written by using a native HTNL language, and a picture address is judged by a urlGet method; a local mode is used when a picture is selected for the first time, and an online mode is preferentially used in other cases, and display verification is carried out through a urlVality module; after address verification, picture information is acquired in an evenlyView function, layout calculation is carried out on multiple pictures, and finally the selected pictures are displayed in a waterfall mode; by clicking the displayed pictures, an imgPreVicw component is entered to display in full screen; on the basis of a public component axios, a picture reading function imgFileGet is encapsulated, a picture local address is read, and a Blob stream form is returned, and a picture format suffix is uniformly modified and uploaded.

Description

TECHNICAL FIELD

[0001] The application relates to the field of front-end H5 light application picture uploading functions, in particular to a mobile terminal HTML5 picture display and uploading method developed based on VUE3. BACKGROUND

[0002] With the digital transformation of factories, the rise of smart factories, and the deepening of intelligent manufacturing reform in all aspects of factory transformation, PDA devices, as an important part of smart factories, have begun to be popularized. They are usually used as data code scanning readers, but some production or maintenance links not only need to scan codes for processing, but also need to upload pictures on site through methods such as taking pictures for on-site retention.

[0003] Currently, there are methods of using HTML5 native plug-ins for picture uploading in light applications, and there are picture uploading functions encapsulated by front-end UI plug-ins. However, these methods are based on the file selection function of the INPUT tag in the HTML5 language to initiate and upload pictures. Their essence is to execute based on the WEB browser kernel itself, so there are often compatibility problems caused by different Android versions and device models, resulting in the inability to use the camera initiation or picture selection function on some models and systems. SUMMARY

[0004] To solve the problems in the prior art, a mobile terminal HTML5 picture display and uploading method developed based on VUE3 is provided.

[0005] The mobile terminal HTML5 picture display and uploading method developed based on VUE3 comprises the following steps:

[0006] By using the native HTNL language, a picture display screen is written, and the urlGet method is used to judge the picture address;

[0007] The local mode is used when selecting a picture for the first time, and the online mode is used in other cases, and the urlVality module is used for display verification;

[0008] After address verification, the evenlyView function is used to obtain picture information, and multiple pictures are laid out and calculated, and finally the selected pictures are displayed in a waterfall mode;

[0009] By clicking the displayed picture, the imgPreVicw component is entered to display the picture in full screen;

[0010] On the basis of the public component axios, the picture reading function imgFileGet is encapsulated, the picture local address is read, and the picture format suffix is uniformly modified and uploaded in the form of Blob stream.

[0011] In some embodiments, the local mode is used when selecting a picture for the first time, the online mode is used preferentially in other cases, and display verification is performed through the urlVality module; if a module has a problem, switching to another mode, if there are problems at the same time, jumping to the error processing module.

[0012] In some embodiments, by clicking the displayed picture, the imgPreVicw component is entered to display in full screen, and the amplifyFunc, reduceFunc and changeImg methods are used to enlarge, reduce and switch the display of the picture.

[0013] In some embodiments, the picture format suffix is uniformly modified and uploaded, including: through the imgFileRead function, the picture in the form of blob stream is converted into a file in the form of file, and the picture format suffix is uniformly modified, and then through the upload function imgUpload function, the HTML5 FormData function is used to connect the public file upload module to upload the picture.

[0014] In some embodiments, if an interface error occurs, the error processing module is entered; the error processing module is a unified error picture template and is displayed on the upper layer of the corresponding error picture, and the removeFunc, reloadFunc and reuploadFunc are provided to provide picture removal, picture reloading and picture retransmission functions.

[0015] The beneficial effects of the present application are: the present application uses VUE3 language for coding, comprehensive processing is performed in the front end, the corresponding base app on the PDA device is connected, the Android function is aroused to select and cut the picture, etc., and the initial file is copied to the app, fed back to the light application, then the front end reads out the file through the file local reading plug-in and performs file local display, and after confirming that there is no error, the file is uploaded to the server through axios. The use compatibility problem of picture upload in the HTML5 light application on the PDA device and the picture processing problem are solved. BRIEF DESCRIPTION OF DRAWINGS

[0016] Figure 1 The present application is a logic flow chart. DETAILED DESCRIPTION

[0017] In order to make the purposes, technical solutions and advantages of the present application clearer, the technical solutions in the embodiments of the present application will be described in more detail below with reference to the drawings in the preferred embodiments of the present application. In the drawings, the same or similar notations represent the same or similar components or components with the same or similar functions throughout. The described embodiments are part of the embodiments of the present application, rather than all the embodiments. The embodiments described below with reference to the drawings are exemplary and are intended to explain the present application, and cannot be understood as limiting the present application. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art without creative labor fall within the scope of protection of the present application.

[0018] The embodiments of the present application will be described in detail below with reference to the drawings.

[0019] In the description of the present application, the terms "comprise" and "have" and any variations thereof are intended to cover non-exclusive inclusion, for example, a process, method, system, product or display comprising a series of steps or units does not have to be limited to those steps or units clearly listed, but can include other steps or units not clearly listed or inherent to these processes, methods, products or displays.

[0020] The following will be described in detail Figure 1 The embodiments of the present application will be described in detail. It is worth noting that the following embodiments are only used to explain the present application and do not constitute a limitation on the present application.

[0021] The picture display and upload function developed based on vue3 is connected with the front end to exchange information with the corresponding base app of Android, and the picture processing function. The picture display and upload function is divided into a picture display module, a picture preview module, a picture upload module and an error processing module. The information exchange and picture processing function of the front end connected with the corresponding base app of Android is divided into an information processing module and a picture processing module.

[0022] First, the information exchange and picture processing function of the corresponding base app of Android,

[0023] First, the information exchange and picture processing function of the corresponding base app of Android,

[0024] Second, the picture processing module, through the API provided by the information processing module encapsulation, provides the function of picture processing, such as assembling choosePictureAPI, CroppingAPI, compressAPI, copyAPI, can realize the function of picture selection, cutting, compression, copying combination, through this module, can be flexible combination of each function, provide the user interface, through the current operation of the user listening, and a mode of the result is provided to the picture display and upload module.

[0025] Second, the picture display and upload function:

[0026] First, the picture display module, through the use of native HTNL language, write picture display screen, and through urlGet method, judge the picture address, use local mode when selecting picture for the first time, and use online mode in other cases, and display verification through urlVality module, if a module appears problem, then switch to another mode, if the problem occurs at the same time, then jump to the error handling module, after address verification, evenlyView function gets picture information, and layout calculation is performed on multiple pictures, finally the selected pictures are displayed in waterfall mode, increase the interface beauty and operability.

[0027] Second, the picture preview module, by clicking the displayed picture, enter imgPreVicw component for full screen display, and through amplifyFunc, reduceFunc, changeImg method, the picture is enlarged, reduced and switched.

[0028] Third, the picture upload module, based on the public component axios encapsulation, encapsulation of picture reading function imgFileGet, read the picture local address, and return in the form of Blob stream, at this time, through imgFileRead function, the picture in the form of blob stream is converted into file form, and the picture format suffix is uniformly modified, then through the upload function imgUpload function, use HTML5 FormData function, connect the picture to the public file upload module, upload the picture, if the interface error occurs, enter the error handling module.

[0029] Fourth, the error handling module, the error handling module is a unified error picture template and is displayed on the upper layer of the corresponding error picture, and provides removeFunc, reloadFunc, reuploadFunc to provide picture removal, picture reload, picture retransmission function.

[0030] Examples are as follows:

[0031] Example 1:

[0032] Step 1. User clicks the picture upload button, at this time, the selection interface is called, and the user selects to take a photo or select a picture.

[0033] Step 2. Click to take a photo, call the camera, and take a photo of the scene.

[0034] Step 3. Pop up the cropping and editing interface to modify the picture, and click OK.

[0035] Step 4. The picture is automatically compressed and copied from the album to the app, the page reads the local address, and the picture is displayed.

[0036] Step 5. User clicks the picture preview to enter full-screen preview, user zooms in to check if the photo is problematic.

[0037] Step 6. Exit preview, click confirm upload, and upload the picture.

[0038] Step 7. Wait for the interface to inform that the upload has failed, display the preset upload failure picture, and display the button to upload again, and the user clicks to upload again.

[0039] Step 8: Upload success, inform the user that the picture has been successfully uploaded.

[0040] Example 2:

[0041] Step 1. User opens the picture upload editing function and clicks on a certain record.

[0042] Step 2. Preferentially load remote pictures, display network errors, and reload local files.

[0043] Step 3. Click to add upload pictures, click the brake to delete pictures to remove unwanted pictures.

[0044] Step 4. Upload the picture.

[0045] Step 5. Upload failed, click the picture to upload again.

[0046] Step 6. Network is restored, upload is successful, and the picture is uploaded and saved.

[0047] The above only describes the preferred embodiments of the present application and does not limit the present application. Any modification, equivalent replacement and improvement within the spirit and principles of the present application should be included in the protection scope of the present application.

Claims

1. A mobile HTML5 image display and upload method developed based on VUE3, characterized in that, Includes the following steps: We used native HTML to write the image display code and used the urlGet method to determine the image address. When selecting an image for the first time, use local mode; otherwise, use online mode first, and verify the display through the urlVality module. After address verification, the image information is obtained in the evenlyView function, and the layout of multiple images is calculated. Finally, the selected images are displayed in a waterfall layout. Clicking on the displayed image will take you to the imgPreView component for full-screen display. Based on the public component axios, we encapsulate the image reading function imgFileGet, which reads the local address of the image and returns it as a Blob stream, and uniformly modifies the image format suffix before uploading. The method of using local mode when selecting an image for the first time, and prioritizing online mode in other cases, and verifying the display through the urlVality module; includes: if one module has a problem, switching to another mode; if multiple modules have problems, jumping to the error handling module; The image format extension is uniformly modified and uploaded, including: using the imgFileRead function to convert the blob stream image into a file format, uniformly modifying the image format extension, and then using the imgUpload function to connect the image to the public file upload module using HTML5FormData to upload the image; If an interface error occurs, the error handling module will be invoked. The error handling module provides a unified error image template and displays it on top of the corresponding error image. It also provides removeFunc, reloadFunc, and reuploadFunc to enable image removal, image reloading, and image retransmission.

2. The mobile HTML5 image display and upload method based on VUE3 as described in claim 1, characterized in that, Clicking on the displayed image will take you to the imgPreView component for full-screen display. You can then use the amplifyFunc, reduceFunc, and changeImg methods to zoom in, zoom out, and switch the display of the image.

Images