图片的上传，显示，删除功能实现

上传

在这里咱们上传图片由一个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传参
}
复制代码

以上变为一个图片上传的，展现，删除的流程。下面为截图

图片样式保护按钮样式之类的就不贴了，能够根据本身的需求写，以上