Shulou(Shulou.com)06/01 Report--

This article mainly introduces "Vue and UpLoad how to upload preview and delete pictures" related knowledge, editor through the actual case to show you the process of operation, the method of operation is simple and fast, practical, I hope that this "Vue and UpLoad how to upload preview and delete pictures" article can help you solve the problem.

1. Use vue+Element to complete a picture upload, click preview, add and delete functions, as shown in the figure:

two。 First of all, we introduce this piece of code into the component, and the use of each attribute is also placed here:

Click upload to upload only jpg/png files, and do not exceed the variable headerObj: {Authorization: window.localStorage.getItem ("token") that stores token in 500kb / /,}

3. Next is its on-preview property, which we can use to preview the picture.

First, set up a pop-up box for image preview:

/ / the src attribute in the img tag accepts the address of the picture passed when you click on the preview.

And then perform the logical operation.

/ / processing the picture preview handlePreview (file) {/ / will get a parameter, which is some information about the returned picture. The main thing is that the picture's url this.picPreviewPath = file.response.data.url;// assigns the url parameter to the variable this.previewDialogVisible = true;// and then lets the pop-up box display}.

3. Then click to delete the picture, and the attribute on-remove is used.

/ / handle handleRemove (file) {/ / 1 to remove the image. Get the temporary path to delete the picture const filePath = file.response.data.tmp_path; / / 2. From the pics array, find the index value const I = this.addForm.pics.findIndex ((x) = > x.pic = filePath); / / 3. Call the splice method to remove image information this.addForm.pics.splice (I, 1);}

4. If all the previous functions have been implemented, you will be half done by now. If the project needs to submit an added image, use its on-success attribute.

/ / listen to the image upload success event handleSuccess (response) {/ / 1. Stitching to get a picture information object temporary path const picInfo = {pic: response.data.tmp_path}; / / 2. Put the picture information object, push, into the pics array this.addForm.pics.push (picInfo);}

5. Tips for the article:

1. Don't forget to add v-bind to the property that needs to be set as a dynamic property

two。 Register variables that need to be bound in data

This is the end of the content about "how to upload, preview and delete pictures with Vue and UpLoad". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.