Method, system, device and storage medium for fast fragmented and continuous transmission of large images

Abstract

This invention discloses a method, system, apparatus, and storage medium for fast, segmented, and resumable uploading of extremely large images, primarily relating to the field of Web application system development technology. The method includes the following steps: setting up an environment based on the Vue architecture and configuring the components within the Vue architecture; performing segmented uploading of the extremely large image on the established Vue architecture; and using the Vue architecture to request the server via Ajax to verify whether the image upload is complete. The beneficial effects of this invention are: it is developed and designed based on the Vue framework, possessing stable and reliable characteristics, while further improving the efficiency of segmented uploading, solving the problem of slow upload speeds, and enhancing the user experience.

Description

Technical Field

[0001] The present invention relates to the technical field of Web application system development, and in particular to a method, system, device and storage medium for fast fragmented and continuous transmission of an extremely large picture. Background Art

[0002] With the booming development of technologies such as big data, cloud computing, and ChatGPT artificial intelligence, and the development of industries such as virtual reality (VR), augmented reality (AR), big data analysis, and medical imaging, high-definition large images, with their high resolution, delicate details, and rich colors, provide users with a more realistic and vivid visual experience. Using segmented upload to store these high-definition large images is undoubtedly the most efficient way. The lightweight Vue framework with two-way data binding on the Web front end integrates the packaged Uploader component in the ElementUI library to achieve the perfect display of segmented upload.

[0003] However, as the number of image files increases, the larger the file, the longer it takes to calculate the md5 value of each fragment. When the image file is large enough, problems such as slow page loading, slow rendering, and poor performance may occur. This may cause the browser to freeze, thus affecting the user experience.

[0004] Therefore, there is an urgent need for a method and system for quickly resuming uploading large images in segments based on the Vue framework to solve the above problems. Summary of the invention

[0005] The purpose of the present invention is to provide a method and system for quickly resuming uploading a super large picture in pieces. The method and system are developed and designed based on the VUE framework. In addition to having stable and reliable characteristics, the method further improves the efficiency of uploading in pieces, solves the problem of slow uploading speed, and improves the user experience.

[0006] In order to achieve the above object, the present invention is implemented through the following technical solutions:

[0007] On the one hand, a method for quickly resuming super large image segmentation is provided, comprising the following steps:

[0008] S1: Build the environment based on the Vue architecture and configure the components on the Vue architecture;

[0009] S2: Upload super large images in segments on the built Vue architecture;

[0010] S3; Use Vue architecture to request the server through Ajax to verify whether the current image has been uploaded.

[0011] Preferably, the step S1 of building an environment on the Vue architecture specifically includes:

[0012] Import Vue components;

[0013] Register WebUploader as a global component;

[0014] Create a new Vue instance;

[0015] The configuration of the components on the Vue architecture in step S1 is specifically as follows:

[0016] Configure the WebUploader component, including the upload address, segment size, number of retransmissions, and the maximum number of upload threads allowed at the same time in the WebUploader.create function.

[0017] Preferably, the configuration of the components on the Vue architecture in step S1 also includes: configuring monitoring of asynchronous calculation of the file md5 value, the function WebUploader.Deferred() in the component WebUploader is used to monitor the execution status of the asynchronous calculation of the file md5 value, specifically: when the super large image file is added to the queue, start calculating the md5 value of the image file, the flag bit of the md5 value of the super large image is recorded as md5FlagMap, when the calculation is completed, set the md5Flag of the current super large image file to true, and trigger deferred.done().

[0018] Preferably, the step S2 includes: normal uploading and abnormal uploading, wherein the abnormal uploading is specifically: breakpoint resume uploading, and the breakpoint resume uploading complies with the following principles:

[0019] Use localStorage in the create hook function in the Vue component to store the fragment information of super large image files;

[0020] Calculate the number of slices storing the super-large image file and the location of the slices according to the information of each slice of the super-large image file and the information of the super-large image file;

[0021] Convert the fragment information into a JOSN string, where the key value in the JOSN string corresponds one-to-one with the server end;

[0022] Use the localStorage.setltem() method in the created hook function in the Vue component to store the JOSN string in localStorage.

[0023] Preferably, the step S3 is specifically:

[0024] The server receives the fragments of the super large image file, and stores the received fragments of the super large image file in the Redis cache, merges all the fragments of the image in order through the Redis cache and TreeMap, and performs secondary image attribute verification on the merged image, including the following steps:

[0025] S31: The server interface temporarily stores the received shard data in Redis, using the shard sequence number as the key and the shard data as the value;

[0026] S32: Check whether the number of shards stored in Redis is consistent with the expected total number of shards;

[0027] S33: Transfer the shards in Redis to TreeMap according to the sequence number;

[0028] S34: Use the IO stream in Java to read the data of each shard in sequence and input it into an output stream to complete the shard merging;

[0029] S35: Use the image processing library Image10 in Java to read the merged super large image;

[0030] S36: Verify the properties of the merged super large image.

[0031] Preferably, the step S3 further comprises: after the upload is completed, using the callback method uploader.on in the component WebUploader to capture the information of the super large image file.

[0032] In another aspect, a system for fast segmented and resumed transmission of large images is provided, comprising:

[0033] The data building module is used to build the environment on the Vue architecture and configure the components on the Vue architecture;

[0034] Data transmission module, used to upload super large images in segments on the built Vue architecture;

[0035] The data verification module is used to: request the server to verify whether the current image has been uploaded.

[0036] On the other hand, a device for fast fragmentation and continued transmission of large images is provided, comprising a processor and a memory for storing a computer program, wherein when the processor executes the computer program, the steps of any of the methods described above are implemented.

[0037] On the other hand, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by one or more processors, the steps of any of the above methods are implemented.

[0038] Compared with the prior art, the beneficial effects of the present invention are:

[0039] 1. The present invention optimizes the exposed properties of the WebUploader component, such as chunk size, number of concurrent upload threads, number of retransmissions (chunkRetry), etc., according to the network environment and server performance to improve upload efficiency and user experience; progress and status callbacks (such as file-progress, file-success, file-error), use the information provided by these callback methods to update the UI interface (such as displaying the upload progress bar, upload status, etc.), and improve user experience. When the upload fails or an exception occurs, the callback method captures the error information and gives appropriate prompts or processing solutions.

[0040] 2. Deferred is used to monitor the execution status of the asynchronous operation of calculating the MD5 value of the file. The larger the image file, the longer it takes to calculate the MD5 value of the image file. Using asynchronous calculation of the MD5 value can greatly improve the user experience.

[0041] 3. The backend server uses Redis cache TreeMap to sequentially store, verify, and merge shard information, greatly improving the verification and merging efficiency. In addition, it performs secondary image attribute verification on the merged image in the shard merging interface to avoid problems with the attributes of the merged image due to different image shooting terminals, which affects the later image display problems. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] Figure 1 is a flow chart of the method of the present invention;

[0043] Figure 2 The backend server of the present invention sequentially filters the shards into the TreeMap;

[0044] Figure 3 It is a schematic diagram of the system structure of the present invention. DETAILED DESCRIPTION

[0045] The present invention will be further described below in conjunction with specific embodiments. It should be understood that these embodiments are only used to illustrate the present invention and are not intended to limit the scope of the present invention. In addition, it should be understood that after reading the content taught by the present invention, those skilled in the art can make various changes or modifications to the present invention, and these equivalent forms fall within the scope limited by the application equally.

[0046] In the present invention, terms such as "upper", "lower", "left", "right", "front", "back", "vertical", "horizontal", "side", "bottom", etc. indicate directions or positional relationships based on the directions or positional relationships shown in the accompanying drawings. They are relational words determined only for the convenience of describing the structural relationships of the various parts or elements of the present invention, and do not specifically refer to any part or element in the present invention and should not be understood as limitations on the present invention.

[0047] In the present invention, terms such as "fixed connection", "connected", "connection", etc. should be understood in a broad sense, indicating that it can be fixedly connected, integrally connected or detachably connected; it can be directly connected or indirectly connected through an intermediate medium. Relevant scientific research or technical personnel in this field can determine the specific meanings of the above terms in the present invention according to specific circumstances, and they should not be understood as limiting the present invention.

[0048] Example:

[0049] like Figure 1 As shown, this embodiment provides a method for quickly resuming super-large image segmentation, including the following steps:

[0050] S1: Build the environment based on the Vue architecture and configure the components on the Vue architecture;

[0051] S2: Upload super large images in segments on the built Vue architecture;

[0052] S3; Use Vue architecture to request the server through Ajax to verify whether the current image has been uploaded.

[0053] The environment for building the Vue architecture in step S1 is specifically as follows:

[0054] Import necessary Vue components;

[0055] Register WebUploader as a global component;

[0056] Create a new Vue instance;

[0057] Configure the components on the Vue architecture, specifically:

[0058] Configure monitoring of asynchronous calculation of file md5 values. The function WebUploader.Deferred() is used to monitor the execution status of the asynchronous operation of asynchronously calculating file md5 values:

[0059] After the oversized image file is added to the queue, the md5 value of the oversized image file is calculated;

[0060] The flag bit for calculating the md5 value of a very large image file is false by default;

[0061] The calculation process of md5 is an asynchronous operation, and the larger the image file, the longer the calculation time;

[0062] Deferred is used to monitor the execution status of the asynchronous operation of calculating the md5 value of the super large image file. The variable md5FlagMap is the flag bit of the md5 value calculation of the super large image file. After the calculation is completed, the md5Flag of the current file is set to true;

[0063] After the MD5 value of the large image file is calculated, the status is updated to completed, and deferred.done() will be triggered.

[0064] Step S2 includes: normal uploading and abnormal uploading. The abnormal uploading is specifically: breakpoint resume uploading. The breakpoint resume uploading follows the following principles:

[0065] Breakpoint resuming requires using localStorage to store the fragment information of the image file in the create hook function of the Vue component;

[0066] According to the determined chunk size (chunkSize), based on the total file size and the size of each chunk, calculate how many chunks are needed to store the entire file;

[0067] Convert the shard information into a JSON string, with the key value corresponding to the server one by one;

[0068] In the create hook function of the Vue component, use the localStorage.setItem() method to store the JSON string in localStorage.

[0069] Step S3 is specifically as follows:

[0070] The server backend RESTful API interface is used to receive the image slices. Each slice has its sequence identifier (index chunk) and slice details. The backend interface receives the data and stores it in the Redis cache.

[0071] like Figure 2 As shown in the figure, the server backend interface merges all the fragments of the image in order through Redis cache and TreeMap, and performs secondary image attribute verification on the merged image:

[0072] The server backend interface temporarily stores the received shard data in Redis, using the shard number as the key and the shard data as the value. Redis is suitable for processing data that requires fast read and write operations. According to the key value, the value collection array chunks[{first shard, shard md5 value, index position, file size, total number of shards, md5 value of the entire file, shard file path}, {second shard, shard md5 value, index position, file size, total number of shards, md5 value of the entire file, shard file path}, ...] is obtained;

[0073] Before merging, check whether the number of shards stored in Redis is consistent with the expected total number of shards;

[0074] Since TreeMap can maintain the order of element insertion, the shards in Redis are transferred to TreeMap by sequence number to ensure the correct order during merging;

[0075] Use Java IO streams to read the data of each shard in sequence and write them to an output stream to complete the merge;

[0076] Use Java's image processing library ImageIO to read the merged image;

[0077] Verify various properties of the image such as resolution, rotation, and perform corrective operations.

[0078] The step S3 also includes: after the WebUploader component completes uploading, the uploader.on callback method captures information:

[0079] Listen to the uploadSuccess and uploadError events, handle the success and failure of image file upload respectively in these two events, and save the relevant information;

[0080] Listen for the uploadComplete event and give appropriate and clear prompts based on the information collected previously.

[0081] like Figure 3 As shown, this embodiment also provides a system for fast segmented and resumed transmission of a large picture, including:

[0082] The data building module is used to build the environment on the Vue architecture and configure the components on the Vue architecture;

[0083] Data transmission module, used to upload super large images in segments on the built Vue architecture;

[0084] The data verification module is used to: request the server to verify whether the current image has been uploaded.

[0085] The contents of the above method embodiments are all applicable to the present system embodiments. The functions specifically implemented by the present system embodiments are the same as those of the above method embodiments, and the beneficial effects achieved are also the same as those achieved by the above method embodiments.

[0086] The present invention also provides a device, comprising:

[0087] at least one processor;

[0088] At least one memory for storing at least one program;

[0089] When the at least one program is executed by at least one processor, the at least one processor implements a method for fast fragmentation and subsequent transmission of a very large image.

[0090] The contents of the above method embodiments are all applicable to the present device embodiments. The functions specifically implemented by the present device embodiments are the same as those of the above method embodiments, and the beneficial effects achieved are also the same as those achieved by the above method embodiments.

[0091] In some optional embodiments, the embodiments presented and described in the steps of the present invention are provided by way of example, with the purpose of providing a more comprehensive understanding of the technology. The disclosed method is not limited to the operations and logical flows presented herein. Optional embodiments are contemplated in which the order of various operations is changed and in which sub-operations described as part of a larger operation are performed independently.

[0092] In addition, although the present invention is described in the context of functional modules, it should be understood that, unless otherwise specified to the contrary, one or more of the functions and / or features described may be integrated into a single physical device and / or software module, or one or more functions and / or features may be implemented in a separate physical device or software module. It is also understood that a detailed discussion of the actual implementation of each module is unnecessary for understanding the present invention. More specifically, in view of the properties, functions, and internal relationships of the various functional modules in the device disclosed herein, the actual implementation of the module will be understood within the conventional skills of the engineer. It is also understood that the specific concepts disclosed are merely illustrative and are not intended to limit the scope of the present invention, which is determined by the full scope of the appended claims and their equivalents.

[0093] An embodiment of the present invention further provides a storage medium, wherein the storage medium stores a program, and the program is executed by a processor to complete a method for fast fragmentation and continued transmission of a very large image.

[0094] It can also be seen that the contents in the above method embodiments are all applicable to the present storage medium embodiments, and the functions and beneficial effects achieved are the same as those in the method embodiments.

[0095] If the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium, including several instructions for enabling a computer device (which can be a personal computer, server, or network device, etc.) to perform all or part of the steps of the methods described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk, and other media that can store program codes.

[0096] The logic and / or steps represented in the embodiments or otherwise described herein, for example, can be considered as an ordered list of executable instructions for implementing logical functions, and can be specifically implemented in any computer-readable medium for use by an instruction execution system, device or apparatus (such as a computer-based system, a system including a processor, or other system that can fetch instructions from an instruction execution system, device or apparatus and execute instructions), or in combination with these instruction execution systems, devices or apparatuses. For the purpose of this specification, "computer-readable medium" can be any device that can contain, store, communicate, propagate or transmit a program for use by an instruction execution system, device or apparatus, or in combination with these instruction execution systems, devices or apparatuses.

[0097] More specific examples of computer-readable media (a non-exhaustive list) include the following: an electrical connection with one or more wires (electronic device), a portable computer disk case (magnetic device), a random access memory (RAM), a read-only memory (ROM), an erasable and programmable read-only memory (EPROM or flash memory), an optical fiber device, and a portable compact disk read-only memory (CDROM). In addition, the computer-readable medium may even be a paper or other suitable medium on which the program is printed, since the program may be obtained electronically, for example, by optically scanning the paper or other medium, followed by editing, deciphering or, if necessary, processing in another suitable manner, and then stored in a computer memory.

[0098] In the description of this specification, the description with reference to the terms "one embodiment", "this embodiment", "example", "specific example", or "some examples" means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present invention. In this specification, the schematic representation of the above terms does not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or more embodiments or examples in a suitable manner.

[0099] The above is a specific description of the preferred implementation of the present invention, but the present invention is not limited to the described embodiments. Those skilled in the art may make various equivalent modifications or substitutions without violating the spirit of the present invention. These equivalent modifications or substitutions are all included in the scope defined by the claims of this application.

Claims

1. A method for quickly resuming super-large image transmission in fragments, characterized in that: The following steps are involved: S1: Build the environment based on the Vue architecture and configure the components on the Vue architecture; S2: Upload super large images in segments on the built Vue architecture; S3: Use Vue architecture to request the server through Ajax to verify whether the current image has been uploaded; The step S3 is specifically: The server receives the fragments of the super large image file, and stores the received fragments of the super large image file in the Redis cache, merges all the fragments of the image in order through the Redis cache and TreeMap, and performs secondary image attribute verification on the merged image, including the following steps: S31: The server interface temporarily stores the received shard data in Redis, using the shard sequence number as the key and the shard data as the value; S32: Check whether the number of shards stored in Redis is consistent with the expected total number of shards; S33: Transfer the shards in Redis to TreeMap according to the sequence number; S34: Use the IO stream in Java to read the data of each shard in sequence and input it into an output stream to complete the shard merging; S35: Use the image processing library Image10 in Java to read the merged super large image; S36: Verify the properties of the merged super large image; S37: After the upload is completed, the callback method uploader.on in the component WebUploader is used to capture the information of the super large image file.

2. The method for fast fragmentation and continued transmission of a large picture according to claim 1, characterized in that: The step S1 of building an environment on the Vue architecture specifically includes: Import Vue components; Register WebUploader as a global component; Create a new Vue instance; The configuration of the components on the Vue architecture in step S1 is specifically as follows: Configure the WebUploader component, including the upload address, segment size, number of retransmissions, and the maximum number of upload threads allowed at the same time in the WebUploader.create function.

3. The method for fast fragmentation and continued transmission of a large picture according to claim 2, characterized in that: The configuration of the components on the Vue architecture in step S1 also includes: configuring to monitor the asynchronous calculation of the file md5 value, the function WebUploader.Deferred() in the component WebUploader is used to monitor the execution status of the asynchronous calculation of the file md5 value, specifically: when the super large image file is added to the queue, start to calculate the md5 value of the image file, the flag bit of the md5 value of the super large image is recorded as md5FlagMap, when the calculation is completed, set the md5Flag of the current super large image file to true, and trigger deferred.done().

4. The method for fast fragmentation and continued transmission of a large picture according to claim 1, characterized in that: The step S2 includes: normal uploading and abnormal uploading. The abnormal uploading is specifically: breakpoint resume uploading. The breakpoint resume uploading follows the following principles: Use localStorage in the create hook function in the Vue component to store the fragment information of super large image files; Calculate the number of slices storing the super-large image file and the location of the slices according to the information of each slice of the super-large image file and the information of the super-large image file; Convert the fragment information into a JOSN string, where the key value in the JOSN string corresponds one-to-one with the server end; Use the localStorage.setltem() method in the created hook function in the Vue component to store the JOSN string in localStorage.

5. Rapid fragmentation and continuous transmission of large pictures system, characterized by: Used to implement any of the methods and steps described in claims 1-4, including: The data building module is used to build the environment on the Vue architecture and configure the components on the Vue architecture; Data transmission module, used to upload super large images in segments on the built Vue architecture; The data verification module is used to: request the server to verify whether the current image has been uploaded, receive the fragments of the super-large image file through the server, and store the received fragment data of the super-large image file in the Redis cache, merge all fragments of the image in sequence through the Redis cache and TreeMap, and perform secondary image attribute verification on the merged image.

6. A device for fast fragmentation and continuous transmission of large images, characterized in that: The method comprises a processor and a memory for storing a computer program, wherein when the processor executes the computer program, the steps of the method according to any one of claims 1 to 4 are implemented.

7. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by one or more processors, the steps of the method according to any one of claims 1 to 4 are implemented.

Images