上传文件如果不是特殊的需求,推荐使用elementUI等UI框架自带的文件上传,方便快捷。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("文件上传成功!");
}
}
}