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

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

elementUI 图片上传回显

这次的需求是这样的：

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

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

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

self.$refs.uploadFile.click();

当选择文件确定时，会触发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("文件上传成功！");}}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！