web端項(xiàng)目中有一個(gè)上傳圖片的功能，但是element-ui提供的上傳插件都不能滿足的我的需要，dropzone也因?yàn)槲覀兛蚣芊庋b的原因，在重置和初始化時(shí)都有一些問(wèn)題。在研究dropzone的問(wèn)題上花費(fèi)了很多時(shí)間，最后也沒(méi)解決，就索性自己寫了一個(gè)。

整理思路
功能方面：
1、上傳圖片，那肯定是input，type=“file”
2、獲取圖片，監(jiān)聽input的change事件
3、拿到圖片上傳
頁(yè)面樣式：
1、展示一個(gè)虛線框，沒(méi)有圖片時(shí)中間顯示一個(gè)+號(hào)，點(diǎn)擊選擇圖片；
2、有圖片時(shí)展示圖片，鼠標(biāo)懸浮在圖片上方時(shí)顯示移除按鈕，否則不展示移除按鈕

代碼如下：

<template>
   <div class="dropzone">
       <input ref="uploadInput"
              type="file"
              name="file"
              value=""
              accept="image/gif,image/jpeg,image/jpg,image/png"
              @change="selectImg($event)">
       <div :class="operationShow?'operation-div':'operation-div hide'">
           <img :src="defaultImg">
           <span class="remove"
                 @click="remove">移除</span>
       </div>
       <div :class="operationShow?'txt hide':'txt'">
           +
       </div>
   </div>
</template>
<script>
export default {
   props: {
       url: {
           default: "",
           type: String
       },
       imgSrc: {
           default: "",
           type: String
       },
       autoUpload: {
           default: true,
           type: Boolean
       }
   },
   data()
   {
       return {
           operationShow: false,
           uploadFile: "",
           defaultImg: process.env.BASE_API + "/service-admin/" + this.imgSrc
       };
   },
   watch: {
       imgSrc(newsVal, oldVal)
       {
           this.init(newsVal);
       }
   },
   mounted()
   {
       this.init(this.imgSrc);
   },
   methods: {
       //選擇圖片
       selectImg(e)
       {
           const imgFile = e.target.files[0];
           if (imgFile)
           {
               this.uploadFile = imgFile;
               let reader = new FileReader();
               reader.readAsDataURL(imgFile);
               reader.onload = (event) =>
               {
                   this.defaultImg = reader.result;
                   this.operationShow = true;
                   if (this.autoUpload)
                   {
                       this.upload();
                   }
               };
           }
       },
       upload()
       {
           //將圖片轉(zhuǎn)成FormData類型數(shù)據(jù)
           let formData = new FormData();
           formData.append("file", this.uploadFile);
           ///通知父級(jí)上傳圖片
           this.$emit("uploadImg", formData);
       },
       remove()
       {
           // 圖片設(shè)為空
           this.defaultImg = "";
           // 隱藏圖片層，展示選擇圖片層
           this.operationShow = false;
           //通知父級(jí)移除圖片
           this.$emit("removeImg");
       },
       init(data)
       {
           //圖片不為空時(shí)，顯示圖片層并展示圖片，input層隱藏
           if (data !== undefined && data !== "" && data !== null)
           {
               this.operationShow = true;
               this.defaultImg = process.env.BASE_API + "/" + data;
           }
           else
           {
               //圖片為空時(shí)，不顯示圖片層，顯示input層
               this.defaultImg = "";
               this.operationShow = false;
           }
       }
   }
};
</script>
<style   rel="stylesheet/scss" lang="scss" >
@mixin base{
   position: absolute;
   top: 5%;
   height: 100%;
   width: 100%;
}
.dropzone{
   position: relative;
   height: 200px;
   max-width: 200px;
   width:100%;
   border: 1px dashed #ccc;
   box-sizing: border-box;
   input{
       @include base;
       opacity: 0;
       z-index: 10;
   }
   .operation-div{
       @include base;
       z-index: 100;
       text-align: center;
       img{
           width: 80%;
           height: 80%;
       }
       &:hover>.remove{
           display: block;
       }
       .remove{
           display: block;
           height: 10%;
           width: 100%;
           display: none;
           text-align: center;
           cursor: pointer;
       }
       .remove:hover{
           color: #409EFF;
       }
   }
   .txt{
       position: absolute;
       width: 100%;
       height: 30px;
       font-size: 40px;
       line-height: 30px;
       top: 50%;
       transform: translateY(-50%);
       text-align: center;
       color: #aaa;
       z-index: 1;
   }
   .hide{
       display: none;
   }

}
</style>

在父組件中使用：

<el-form-item
                    label="圖片"
                    prop="pic">
                    <form-upload-image
                        :auto-upload="true"
                        :img-src="form.data.pic" // form表單的數(shù)據(jù)
                        @uploadImg="uploadImg"
                        @removeImg="removeImg"/>
                </el-form-item>

// 上傳圖片
        uploadImg(formData)
        {
            //手動(dòng)校驗(yàn)圖片輸入框
            this.$refs["dataForm"].validateField("pic");
           //使用axios上傳圖片，repo是自己寫的axios攔截器
            new Repo({
                url: 'url',
                method: "post",
                data: formData,
                headers: { "Content-Type": "multipart/form-data" }
            }).then((response) =>
            {
               // 上傳成功，清空校驗(yàn)信息
                this.$refs["dataForm"].clearValidate("pic");
                //修改form data數(shù)據(jù)
                this.form.data.pic = response.data[0];
            });
        },
        // 移除圖片
        removeImg()
        {
           //修改form data數(shù)據(jù)
            this.form.data.pic = "";
            //手動(dòng)校驗(yàn)圖片輸入框
            this.$refs["data-form"].$refs["default"].validateField("pic");
        }