Take you to use VUE to achieve the effect of uploading pictures

Abstract: I saw the effect of uploading pictures when I was visiting station b. I thought I could make one myself, because the original author was written in native js, so I might as well write it in vue. Of course, it is a very good one. For small things, just quote vue directly in the HTML file. The detailed steps are as follows~

This article is shared from the HUAWEI cloud community " vue realizes uploading pictures and previewing the effect ", the original author: Northern Lights Night. .

1. Not many words, first look at the effect:

Hello everyone, (๑╹◡╹)ﾉ" This is the effect of uploading pictures when I was visiting station b. I thought I could make one myself, because the original author was written in native js, so I might as well use it Vue is written. Of course, it is a very small thing. Just quote Vue directly in the HTML file. The detailed steps are as follows~

2. Detailed implementation steps:

1. First define the basic label:

Regardless of the vue instructions in the tags, first define the basic HTML tags.

 <div id="app">
         <div class="upload">           
           <input type="file" id="file" multiple @change="upload">
         </div>
        <ul class="view">
            <li>
                <img src="./img/52.jpg">
                <div class="delect" title="删不了我" @click="noDelect">×</div>
            </li>
            <li v-for="(item,index) in list" :key="index" >
                <img :src="item">
                <div class="delect" @click="delect(index)">×</div>
            </li>     
        </ul>
    </div>

.upload is the upload picture box, which has a tag with input type of file;
.view is a big box for pictures, each small li is a picture, there is a picture by default, and a small li is for v-for rendering;
delect is to delete the picture button;

2. Start to define the basic css style:

This is the global and bottom box styles.

 *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        #app{
            width: 900px;
            background-color: rgb(241, 241, 241);
            margin: 50px auto;
        } 

3. The style of .view:

.view{
           display: flex;
           justify-content: space-around;
           flex-wrap: wrap;
           align-items: space-around;
        }

display: flex; flex layout;
justify-content: space-around; each sub-item of the main axis is aligned at intervals.
flex-warp: warp; wrap.
align-items: space-around: each sub-item of the cross axis is aligned at intervals.

4. Picture style:

.view > li{
            width: 200px;
            height: 120px;
            background-color: rgba(54, 194, 35,0.1);
            list-style: none;
            margin: 20px;
            position: relative;
        }
        .view > li > img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

object-fit: cover; The picture keeps its original proportions without stretching.

5. The style of the .deldect button:

 .delect{
            position: absolute;
            right: 0;
            top: 0;
             width: 20px;
             height: 20px;
             text-align: center;
             line-height: 20px;
             font-size: 15px;
             background-color: rgba(255, 255, 255,0.5);
             user-select: none;
             cursor: pointer;
             opacity: 0;
        }
        .delect:hover{
 
            background-color: rgba(31, 31, 31, 0.5);
             color: white;
        }
        .view>li:hover .delect{
            opacity: 1;
        }

user-select: none; text cannot be selected;
opacity: 0; transparency;

6. Change the style of the input tag:

By wrapping a div on the input tag, make the input tag transparent, and then set the desired style for the div. You can set a double pseudo-type element for the div, fill in the text and style.

.upload{
            width: 80px;
            height: 20px;
            background-color: rgba(135, 206, 235,0.2);
            border: 1px dashed black;
            border-radius: 5px;
            position: relative;
 
        }
        .upload:hover{
            background-color: rgba(135, 206, 235,1);
        }
        .upload::before{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            content: '上传图片';
            font-size: 13px;
            text-align: center;
            font-family: 'fangsong';
            line-height: 20px;
            user-select: none;
        }
        #file{
            width: 100%;
            height: 100%;
            opacity: 0;
        }

7. Introduce vue to our single page and declare vue instance objects:

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
          var app = new Vue({
              el:"#app",
              data: {},
              methods: {}
          })     
    </script>

8. Bind a change event to the input tag and declare a list array at the same time:

The list array will store the address of each picture.

 <input type="file" id="file" multiple @change="upload">

data: {
            list:[]
        },

9. Define the upload method to store all the selected image addresses in the list array:

The upload function is declared in methods: {}.

   upload(e){
       //e.target指向事件执行时鼠标所点击区域的那个元素，那么为input的标签，
      // 可以输出 e.target.files 看看，这个files对象保存着选中的所有的图片的信息。
                      console.log(e.target.files)
                 //------------------------------------------------------     
                   // 既然如此，循环这个files对象，用for of 循环，     
                      for(let item of e.target.files){
                      //正则表达式，判断每个元素的type属性是否为图片形式，如图
                        if (!/image\/\w+/.test(item.type)) {
                            // 提示只能是图片，return
                                alert("只能选择图片");
                                return;
                         } 
                         // 保存下当前 this ，就是vue实例
                            var _this = this;
                       //  创建一个FileReader()对象，它里面有个readAsDataURL方法
                            let reader = new FileReader();
                            // readAsDataURL方法可以将上传的图片格式转为base64,然后在存入到图片路径, 
                            //这样就可以上传电脑任意位置的图片                            
                            reader.readAsDataURL(item);
                            //文件读取成功完成时触发
                            reader.addEventListener('load',function(){
                            //  reader.result返回文件的内容。
                            //只有在读取操作完成后，此属性才有效，返回的数据的格式取决于是使用哪种读取方法来执行读取操作的。
                                //给数组添加这个文件也就是图片的内容
                                _this.list.push(this.result)
                            })
                    }
                 //------------------------------------------------------------
                 },

10. The page displays each picture of the array:

 <li v-for="(item,index) in list" :key="index" >
                <img :src="item">
                <div class="delect" @click="delect(index)">×</div>
            </li>    

Bind the v-for loop to the little li and loop the list array. Each element is actually an address, which is bound to the src attribute of the picture.

index is to set an index value for each element of the array. It can be understood as an array subscript.

11. Define the method of deleting pictures:

First bind a click event to the box to be deleted, and pass in the index value at the same time, so as to know which image is clicked:

<div class="delect" @click="delect(index)">×</div>

Just use the splice method to delete the corresponding data in the list array.

   delect(index){
                     console.log(index);
                     this.list.splice(index,1);                    
                 },
                 // 这是默认图片的方法，弹出默认图片无法删除
                 noDelect(){
                     alert('默认图片无法删除。')
                 }
              }

3. Source code sharing:

The download address is as follows: https://gitee.com/aurora-in-winter/blog/tree/master/

Click to follow and learn about Huawei Cloud's fresh technology for the first time~