vue web端实现图片上传

2019-03-25  本文已影响0人  super静_jingjing

web端项目中有一个上传图片的功能,但是element-ui提供的上传插件都不能满足的我的需要,dropzone也因为我们框架封装的原因,在重置和初始化时都有一些问题。在研究dropzone的问题上花费了很多时间,最后也没解决,就索性自己写了一个。

整理思路
功能方面:
1、上传图片,那肯定是input,type=“file”
2、获取图片,监听input的change事件
3、拿到图片上传
页面样式:
1、展示一个虚线框,没有图片时中间显示一个+号,点击选择图片;
2、有图片时展示图片,鼠标悬浮在图片上方时显示移除按钮,否则不展示移除按钮

代码如下:

<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()
       {
           //将图片转成FormData类型数据
           let formData = new FormData();
           formData.append("file", this.uploadFile);
           ///通知父级上传图片
           this.$emit("uploadImg", formData);
       },
       remove()
       {
           // 图片设为空
           this.defaultImg = "";
           // 隐藏图片层,展示选择图片层
           this.operationShow = false;
           //通知父级移除图片
           this.$emit("removeImg");
       },
       init(data)
       {
           //图片不为空时,显示图片层并展示图片,input层隐藏
           if (data !== undefined && data !== "" && data !== null)
           {
               this.operationShow = true;
               this.defaultImg = process.env.BASE_API + "/" + data;
           }
           else
           {
               //图片为空时,不显示图片层,显示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表单的数据
                        @uploadImg="uploadImg"
                        @removeImg="removeImg"/>
                </el-form-item>
// 上传图片
        uploadImg(formData)
        {
            //手动校验图片输入框
            this.$refs["dataForm"].validateField("pic");
           //使用axios上传图片,repo是自己写的axios拦截器
            new Repo({
                url: 'url',
                method: "post",
                data: formData,
                headers: { "Content-Type": "multipart/form-data" }
            }).then((response) =>
            {
               // 上传成功,清空校验信息
                this.$refs["dataForm"].clearValidate("pic");
                //修改form data数据
                this.form.data.pic = response.data[0];
            });
        },
        // 移除图片
        removeImg()
        {
           //修改form data数据
            this.form.data.pic = "";
            //手动校验图片输入框
            this.$refs["data-form"].$refs["default"].validateField("pic");
        }
上一篇 下一篇

猜你喜欢

热点阅读