vue form表单图片上传

前言

• 在实际开发中经常需要在from表单上传图片，比如考试封面，文件封面。等等

• 在element-ui 有现成的，但是他需要上传到地址，晚上查阅的也有现成的，太重了。

• 我们的需求就是上传一个图片预览，获取到base路径，双向绑定到form表单，传给后端保存。

• 我们可以通过2个盒子+input的file类型+自定义点击事件dispatchEvent就可以实现了

直接上代码

// form表单结构
<el-form-item label="试卷封面">
                <div class="picture">
                  <el-image :src="addform.cover"></el-image>
                  <div class="uppicture">
                    <input
                      type="file"
                      class="upinput"
                      ref="file"
                      @change="showimg"
                    />
                    <i class="el-icon-plus" id="changes" @click="changeimg"></i>
                  </div>
                </div>
 </el-form-item>

通过方法把图片路径绑定给form表单

 // 预览图片
    showimg() {
     const that = this;
      console.log(that.$refs.file);
      console.log(that.$refs.file.files[0]);
      // 读取文件内容
      var fr = new FileReader();
      // 将读取到的文件编码成DataURL
      fr.readAsDataURL(that.$refs.file.files[0]);
      // 文件读取成功时触发
      fr.onload = function () {
        // base64格式的图片
        console.log("base64格式", fr.result);
        that.addform.cover = fr.result;
      };
    },
    // 更换图片
    changeimg() {
      // 给元素添加自定义事件
      this.$refs.file.dispatchEvent(new MouseEvent("click"));
    },

样式

 .el-form {
        margin: 30px 15px 10px 0;
        .el-image {
          width: 120px;
          height: 120px;
          border: 1px solid #ccc;
          margin-right: 10px;
        }
        .picture {
          display: flex;
          justify-content: space-around;
          .uppicture {
            flex: 1;
            position: relative;
            border: 1px solid #ccc;
            input {
              width: 100%;
              height: 100%;
              vertical-align: middle;
              opacity: 0;
            }
            i {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              font-size: 30px;
            }
          }
        }
      }

细节

注意image src路径 和表单的名字 绑定的名字可以直接复制

---

经过这一趟流程下来相信你也对 vue form表单图片上传 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕