原生input-file图片上传，转base64存储到node或socket广播对应房间

做的第二版聊天室demo来玩，比第一版新增socket.io加入房间功能

基于前端：vue2+buefy（超喜欢这个ui，虽然没中文文档）+简单媒体查询响应式

服务端：node+express+socket.io（很优秀的第三方api）

只记录下自己的聊天室图片上传主要代码

template部分

上传图片，iconfont与input-file隐藏处理

<i class="iconfont icon-photo pr-4 uploadImg">
                <input
                  class="uploadImgInput"
                  type="file"
                  @change="addImg"
                  ref="inputer"
                  accept="image/png,image/jpeg,image/gif,image/jpg"
                />
              i>

style处理input-flie占位隐藏

.uploadImg {
    position: relative;
    .uploadImgInput {
        cursor: pointer !important;
        width: 1.46rem;
        height: 100%;
        z-index: 10000;
        opacity: 0;
        position: absolute;
        left: 0;
    }
}

methods，通过HTML5的new FileReader()，将图片转换base64传递socket服务端

addImg(e) {       const input = e.target;       const files = e.target.files;       if (files && files[0]) {         const file = files[0];         if (file.size > 1024 * 1024 * 3) {           this.$buefy.notification.open({             message: `文件大小不能超过3M`,             duration: 3500,             progressBar: true,             type: "is-danger",             pauseOnHover: true,             position: "is-bottom-left",           });           input.value = "";           return false;         }
        if (           file.type != "image/png" &&           file.type != "image/jpeg" &&           file.type != "image/gif" &&           file.type != "image/jpg"         ) {           this.$buefy.notification.open({             message: `不支持该文件类型`,             duration: 3500,             progressBar: true,             type: "is-danger",             pauseOnHover: true,             position: "is-bottom-left",           });           return false;         }
        this.uploadImg(files[0]);       }     },

//上传图片
    uploadImg(file) {
      let imgName = file.name.split(".")[0].toString();
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onloadend = () => {
        this.$socket.emit("sendImg", {
          reader: reader.result,
          imgName,
        });
      };
    },

服务端socket.io处理，注释掉的是存本地的，我这里不存只做对应房间广播中转回客户端

 socket.on("sendImg", ({ reader, imgName }) => {
        // const splitted = reader.split(';base64,');
        // const format = splitted[0].split('/')[1];
        // fs.writeFileSync(`./images/${imgName}.` + format, splitted[1], { encoding: 'base64' });
        const user = getCurrentUser(socket.id);
        io.to(user.roomName).emit('img', sendImg(user.userName, reader, imgName))
    });

客户端socket监听

img(data) {
      console.log("img", data);
      const isMe = this.userName === data.userName;
      const res = Object.assign(data, { isMe });
      this.msgList.push(res);
      this.scrollFunc();
    },

初版效果