vue web端实现图片上传

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

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

代码如下：

在父组件中使用：

// 上传图片
        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");
        }