原生input上传文件（聊天发送文件消息）

上传文件如果不是特殊的需求，推荐使用elementUI等UI框架自带的文件上传，方便快捷。elementUI上传文件

elementUI 图片上传回显

这次的需求是这样的：

点击图标发起文件发送操作，选择文件

主要还是利用input[type="file"]的change事件，获取选择的文件内容

发送图标的样式就不展示了，个人需求不同，样式不同，主要是图标的点击事件中执行input file的click事件。

self.$refs.uploadFile.click();

<!-- 图片/文件上传 multiple属性多选-->
        <form
          action="#"
          style="display: none"
          id="uploadForm"
          class="uploadForm"
        >
          <input
            type="file"
            name="file"
            id="uploadFile"
            ref="uploadFile"
            @change="uploadFileChange"
          />
        </form>

当选择文件确定时，会触发input file的change事件。

// 文件上传发生变化
    async uploadFileChange(e) {
      var that = this;
      let fileInput = document.getElementById("uploadFile");
      let fileName = fileInput.files[0].name;
      let fileSize = fileInput.files[0].size;
      let fileID = "",sizeNum;
      // 获取文件类型
      let ext = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length);
      let type = /png|jpg|bmp|jpeg|gif/i.test(ext) ? "image" : "file";
      // 校验操作
      if (fileInput.files[0].size == 0) {
        this.$message.error("不能传空文件");
        return;
      }
      if (!(fileInput.files[0].size / 1024 / 1024 < 10)) {
        this.$message({
          type: "warning",
          message: "上传文件大小不能超过 10MB!",
        });
        return;
      }
      // 发送文件消息相关操作，可忽略
      let numm = Math.floor((Math.random()*10)+1);
      let msgcustom = fileName + fileInput.files[0].size + numm;
      let fileMsgType = type == "image" ? "IMAGE" : "LINk"; // websocket发送文件类型(LINK:文档)
      let nickName = that.$store.state.loginUserInfo.nickName;
      that.loadingFile.push({ name: fileName });
      that.loadingMsg.push(msgcustom); // 加载中状态
      // 兼容多端数据格式，可忽略
      if(fileSize < 1024 ) {
        sizeNum = fileSize + 'b';
      } else if(fileSize == 1024) {
        sizeNum = "1KB";
      } else if(fileSize > 1024 && fileSize < (1024 * 1024)) {
        sizeNum = ((fileSize / 1024).toFixed(1)) + "KB";
      } else if(fileSize == (1024 * 1024)) {
        sizeNum = "1M";
      } else if(fileSize > (1024 * 1024)) {
        sizeNum = (fileSize / (1024 * 1024)).toFixed(1) + "M";
      }
      // 上传文件需要使用FormData类型数据
      let formFile = new FormData();
      formFile.append("file", fileInput.files[0]);
      if(type == 'image') {
        // 向消息列表推送一条消息
        let sourceInfo = {
          name: nickName,
          textAvator: nickName,
          imgAvator:
            that.$store.state.myInfo && that.$store.state.myInfo.avatar
              ? that.$store.state.myInfo.avatar
              : "",
          text: "",
          msgType: "IMAGE",
          type: that.$store.state.currChatUserInfo.type,
          isLoading: true,
          msgcustom: msgcustom,
          timelineId: that.getTimelineId,
        };
        that.$store.commit("push_message", sourceInfo);
        // 向消息列表推送一条消息
        // 上传图片
        let res = await ImApi.addImg(formFile);
        e.target.value = null;
        that.sendImageMsg(res, msgcustom);
      } else if(type == 'file') {
        // 向消息列表推送一条消息
        let sourceInfo = {
          name: nickName,
          textAvator: nickName,
          imgAvator:
            that.$store.state.myInfo && that.$store.state.myInfo.avatar
              ? that.$store.state.myInfo.avatar
              : "",
          text: "",
          size: fileInput.files[0].size,
          msgType: "LINK",
          type: that.$store.state.currChatUserInfo.type,
          isLoading: true,
          msgcustom: msgcustom,
          timelineId: that.getTimelineId,
        };
        that.$store.commit("push_message", sourceInfo);
        // 向消息列表推送一条消息
        // 上传文件
        let res = await ImApi.addFile(formFile);
        e.target.value = null;
        if(res.code == 200) {
          that.sendDocMsg(res.data, fileName,sizeNum,fileID,msgcustom);
        } else {
          that.$message.error("文件上传失败！");
        }
      }
      that.$nextTick(() => {
        util.scrollChatListDown(); // 滚动聊天列表到底部
      });
    },

如果是发送消息类型的文件或者图片便是以上操作。

如果只是单纯的上传文件则可以简化

async uploadFileChange(e) {
      var that = this;
      let fileInput = document.getElementById("uploadFile");
      let fileName = fileInput.files[0].name;
      let ext = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length);
      let type = /png|jpg|bmp|jpeg|gif/i.test(ext) ? "image" : "file";
      if (fileInput.files[0].size == 0) {
        this.$message.error("不能传空文件");
        return;
      }
      if (!(fileInput.files[0].size / 1024 / 1024 < 10)) {
        this.$message({
          type: "warning",
          message: "上传文件大小不能超过 10MB!",
        });
        return;
      }
      // 文件大小转换
      // if(fileSize < 1024 ) {
      //   sizeNum = fileSize + 'b';
      // } else if(fileSize == 1024) {
      //   sizeNum = "1KB";
      // } else if(fileSize > 1024 && fileSize < (1024 * 1024)) {
      //   sizeNum = ((fileSize / 1024).toFixed(1)) + "KB";
      // } else if(fileSize == (1024 * 1024)) {
      //   sizeNum = "1M";
      // } else if(fileSize > (1024 * 1024)) {
      //   sizeNum = (fileSize / (1024 * 1024)).toFixed(1) + "M";
      // }
      // 文件大小转换
      let formFile = new FormData();
      formFile.append("file", fileInput.files[0]);
      if(type == 'image') {
        let res = await ImApi.addImg(formFile); // 上传接口
        if(res.code == 200) {
          that.$message.success("文件上传成功！");
        }
      } else if(type == 'file') {
        let res = await ImApi.addFile(formFile); // 上传接口
        if(res.code == 200) {
          that.$message.error("文件上传成功！");
        }
      }
    }