Vue2.0+vue-router to make a picture upload preview component

Before sending an article about their own view of the front-end components, but due to the business logic of learning and practice differences, so I practice some of the demo logic is relatively simple, intends to use Vue to reconstruct the project now done by the company, so on some small features on the page using Vue to do, Now write this is the project user feedback function, the harvest is very much.

Harvest: DOM Operations-the use of the data manipulation router uses components, which are summarized in the tail.

• Functions: 1. Uploading images
• 2. Display thumbnail image
• 3. You can delete
• 4. You can re-select files
  

First on the finished product map (the main picture this piece), their own home to do the main functions, style will not care.

First on the file directory

Due to the test demo, the structure is basically the same as the directory generated by Vue initialization, where the hello file is used as a file for this component development, and the app file is the main file. Here's your own understanding of the Vue file: Is the component, also the page. So when you define it, you have to do the routing or the component according to the actual situation.

Because the product to the diagram above requires 5 buttons, which means only 5 files can be selected, here if the original thinking to do, is to put 5 input into, but now with Vue to do, must use v-for, otherwise too low. First look at the HTML section

Use the UL list as the container for input, and then use the V-for loop mmm object in Li to generate 5 initial boxes.

IMG is the preview time needed to use v-if based on whether Item.data is empty to render, and SRC is item.data

Input is uploaded, in its Change event to achieve our main function, PS: The actual business use should also specify the name, and Item.name should be the same, so submitted to the background to better read.

span is used to delete item.data,

Now look at the data section:

The MMM array initially has 5 sub-objects (because 5 fixed selection boxes are required), name defines itself, data is used to store the base64 after the image is uploaded, and a flag is used to determine if the upload was successful. Now look at the effect

OK, has got 5 selectors, the main idea of style is to set input to inline block-level elements and then 100% full transparent, relatively simple, now to achieve the preview effect,

The preview effect is mainly using the H5 new feature FileReader implementation,

Idea: Specify the Change Event trigger Pushimg method in input, accept two parameters, one is event, an index

In v-for cycle rendering Li, using v-for= "(item,index) in MMM", where item is the element of MMM array, index is the subscript of the element, here can see the official documents

Now look at the Pushimg method:

Let 4 variables inside the pushimg

MM points to the MMM in data, because it needs to be used in reader.onload, if the direct this.mmm will be due to the closure of the pushimg this

Flag is used to mark upload success, as a prompt to upload successfully

Flie point to input

Reader is what we need to preview the image, this is a H5 new interface, specific user manual Click here

In Reader.onload, we will read the result that is the base64 of the image into the Mmm[i].data

It also sets a timer to change the flag value to achieve the effect of a successful prompt.

Ps:reader.onload is an asynchronous operation, so result is either passed inside it or sent out with a callback or promise.

Now upload a picture to see the effect

OK, now for the last step--delete the picture

The Click event for DELIMG has been specified in span to see the code:

The main thing to do is to empty the clicked selector file.

Now go through the complete process:

Xiao Gong Gaocheng, next talk about using Vue-router to route this page to other pages, to use the first to install the module, in the project directory using CNPM install Vue-router on the line

Or first, the approximate steps:

1. Make the page (this is already done, that is our Hello file)

2. Configure Routing

3. Show on the page

directly to the 2nd step, if the understanding of the physical router should know that there is a routing table in the router, here I built a route.js, similar to the router in the routing table.

In Route.js, the introduction of Vue, Vue-router, and the components that need to be routed hello, in the diagram

The import Hello from ' @/components/hello ' here is equivalent to the abbreviation I configured for a src directory, and if not, follow the normal path.

The path in is a route, which is used later, name is equivalent to an alias, component is the corresponding component.

As a follow, we create a routing table that we need to mount the routing table at the main entrance. Here the main entrance of the project Main.js,
Enter Main.js, here to introduce the above configured routing table Route.js, and the program's main module app, you can see our Vue instance is attached to the app.

The next step is to show in App.vue that, because it is a static route, the main configuration template module, continue on the configuration diagram

The first part of the circle in the diagram is similar to our a tag, except that Vue-router is encapsulated with the router-link tag, and it is worth mentioning that the router-link tag is just a package, and there is no actual HTML meaning, which can be put in various content.

The second part is the stage we're going to show.,<router-view></router-view> is where our routing module needs to be mapped, and now it's time to test for success.

Notice the change of our address bar, from localhost:8080 to Localhost:8080/#/hhh, that is to say, this route jumps successfully.

Now to do the components introduced into the page

Put hello as a component in the app, as long as the other pages reference the component, it can be used, not limited to the app.

We will first introduce hello into the script section of the App.vue file and register the component

Next, put the component in the template section and we'll put it on top.

Now look at the effect, the module has been rendered in the page

Now let's take a look at the router and the combined effect introduced as a module.

Now we can see that the component parts and the routed parts are working properly, so our function is all done.


Summary:   data-driven magic is too big, take the picture came to say, we actually only in the actual operation of the MMM in data assignment operation, and then bind the value on the DOM node, through the two-way binding to achieve the operation of the DOM, especially in the current Web site project, Most of them are data processing, such as e-commerce sites. In fact, before using Vue to do this upload function, I have used the traditional jquery to write this plugin, from the means, jquery is to manipulate the DOM node, set the ID of each DOM node, and then JS then through the ID to the corresponding node, to the DOM bound events or take out the DOM value, Need to write a lot of HTML code and JS code, in Vue, using a v-for can be used to render a number of desired content. In terms of reusability, the upload image function We did this time is already a component, and we can not only use it in App.vue. Like this hello, we can not only use the route to make it a new page, we can also use component as a component, that is, as long as the business needs, we can choose a reasonable way to reuse what we have written.

It is particularly important to note that using a data-driven framework such as angular or vue, we need to turn the original manipulation of the DOM into manipulating data.

Vue2.0+vue-router to make a picture upload preview component