Use vue to build an upload image form

I don’t know what name is better for this blog. After all, I just started learning vue, and I was not very familiar with it, and I was slowly exploring it. I used to writing js code with jQuery, and the thinking logic also needs to be transformed.

1. Change your thinking

The first thing to do to write code using vue is to transform your thinking. vue is a data-driven framework. We only need to operate data. After the data changes, vue will automatically change the DOM structure, while jQuery directly operates the DOM. For example, I made a mistake in the code I first wrote. There is a page with multiple input tags in parallel, and the value of the name attribute is increased by itself. Then I just use the v-for loop to fill the index and delete it according to the index. So the code looks like this:
html:

<div >
 <ul>
 <li v-for="(item, index) in username">
 ${index}. <input type="text" :name="'sb['+index+']'" /> <a href="javascript:;" :index="index" @click="del">delete</a>
 </li>
 </ul>
 <a href="javascript:;" @click="add">add</a>
</div>

js:

var app = new Vue({
 el: '#app',
 delimiters : ['${', '}'],
 data: {
  username : [1, 2, 3] // As long as the array is subscripted, the value does not matter },
 methods : {
 // Add options add : function(){
  (1);
 },

 // Delete the current option del : function(e){
  var index = ('index'); // Get the location and delete it  (index, 1);
 }
 }
})

We first enter different content in the input box, and then delete a certain option in the middle. [demo1]
It turned out that the one who was deleted was always the last one. Why is this? I also deleted the array? I only realized after reading the official document: the content entered by the user into the input box is only saved in the DOM, and we use theusernameWe do not save the content entered by the user in the subscript. When we delete one of them, the username changes, causing the DOM to re-render. After rendering, the last item is gone.
So how can I modify it to truly delete a certain item? We just need to save the content entered by the username array:

html:

<div >
 <ul>
 <li v-for="(item, index) in username">
 ${index}. <input type="text" :name="'sb['+index+']'" :value="item" > <a href="javascript:;" :index="index" @click="del">delete</a>
 </li>
 </ul>
 <a href="javascript:;" @click="add">add</a>
</div>

js:

var app = new Vue({
 el: '#app',
 delimiters : ['${', '}'],
 data: {
  username : ['wenzi', 'xxxx', 'yyyy'] // As long as the array is subscripted, the value does not matter },
 methods : {
 // Add options add : function(){
  (''); // The newly added input box is empty },

 // Delete the current option del : function(e){
  var index = ('index'); // Get the location and delete it  (index, 1);
 }
 }
})

Let's look at the effect: [demo2]

2. Upload pictures

At the beginning, the jQuery plugin was usedfileupload, very complete functions, when I bind the file tagchangeAfter the event, then call the plug-in to upload images, unexpected bugs will always occur. For example, I restrict the image format first and can only upload images in png format, but sometimes jpg format can also be uploaded; png format images cannot be uploaded in English, so I can first upload a Chinese name, and then upload the English name.
Later I found out that it was under html5formDataAttributes, it can upload images very conveniently, and can also upload other parameters. It can be done in a small piece of code:

// Upload the image and bind the change eventuppic : function(e){
 var file = [0]; // Only one image is allowed to be uploaded at a time, so only [0]
 //Judge image format if( !='image/png' ){ 
  alert('Improper image format');
   = 0;
  $().val('');
  return false; 
 }

 // Use formData to assemble data var formData = new FormData();
 ('pic', $()[0].files[0]); // File data ('flag', '1'); // Some other parameters $.ajax({// Ajax upload  url: '',
  type: 'POST',
  cache: false,
  data: formData,
  processData: false,
  contentType: false
 }).done(function(result) {
  ('Upload is completed');
 });
}

3. Summary

Now I am just starting to learn vue, and the code is definitely bad. The most important thing is to change your mind!

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.