圖片的上傳，顯示，刪除功能實現

上傳

在這裏咱們上傳圖片由一個input和咱們根據本身需求寫的上傳按鈕（不一樣的需求要求上傳的方式不一樣），先完成Input的編寫，根據咱們本身的需求使用其屬性(此項目爲vue項目，部分ui採用的elment-ui)

<input type='file' accpet='image/png,image/jpg' mutiple  ref='input' @change='selectedFile' style='display:none'>
<div class='content'>
    <!--上傳按鈕的樣式-->
    <div class="rect-box-style image-manager-add-button" @click="addPic">
          <div class="plus">+</div>
          <div class="local-uploads-title">只能上傳png jpg</div>
    </div>
    <!--顯示圖片的列表-->
    <div class='image-content' v-for='(item,index) in items' :key=index :class='item.type == 'png' ? 'item-type-png':'item-type-jpg'> <el-image class='img' :src='item.src' fit='contain'></el-image> <!--遮罩層，保護刪除按鈕--> <div class='mask'> <div class='icon el-icon-delete' @click='deleteImg(item.id,index)'></div> </div> </div> </div> 複製代碼

1.input中用到了type='file'（file屬性值爲供文件上傳，不要使用iamge,此屬性爲定義上傳按鈕爲iamge形式）

2.accpeet爲上傳圖片的類型限制

3.mutiple容許一次上傳多張圖片

4.設一個ref,方便下面按鈕點擊時，觸發此input的上傳事件

5.綁定上傳文件的一個方法，觸發此方法時可對上傳圖片的大小，類型等等作出限制

6.style='display:none' 爲何要設置display:none?由於此input只提供功能,不露面（終極打工仔），後面的點擊按鈕纔是用戶眼中的上傳圖片功能（淚目）

selectedFile方法，addPic方法，deleteImg方法

computed:{
//此項目使用了vuex，全部本地數據都存在了store裏了，全部取圖片列表以下方法
  items:(){
      return this.$store.state.upload.image.items;
  }  
},
method:{
    selectedFile(e) {
      const files = e.currentTarget.files;
      if (files.length === 0) return;
      for (let i = 0; i < files.length; i++) {
        if (files[i].size > MAX_FILE_SIZE) {
          Message({
            message: "圖片大小不能超過5MB",
            type: "error",
            duration: 3 * 1000
          });
          return;
        }
      }
      this.$store.dispatch("upload/uploadImages", ["image", files]);//將文件上傳
    },
    addPic(){
        this.$refs[input].click();//點擊上傳按鈕，觸發input上傳事件
    },
    deleteImg(id, index) {
      this.$store.dispatch("upload/deleteUserResources", ["image", id, index]);
    } //將要刪除的圖片id,index傳參
}
複製代碼

以上變爲一個圖片上傳的，展現，刪除的流程。下面爲截圖

圖片樣式保護按鈕樣式之類的就不貼了，能夠根據本身的需求寫，以上