之前开源的单用户客服系统，上传附件成功后，还不能展示出文件形式，今天把上传展示出文件形式给开发完善一下。
我想要实现的效果是，展示出文件的名称和大小信息
后端返回一个带有文件信息的json结果，前端把该信息组织一下并解析成可以展示的样子
后端golang部分代码
代码语言：javascript复制func UploadFile(c *gin.Context) {
f, err := c.FormFile("realfile")
if err != nil {
c.JSON(200, gin.H{
"code": 400,
"msg": "上传失败!",
})
return
} else {
fileExt := strings.ToLower(path.Ext(f.Filename))
if f.Size >= 90*1024*1024 {
c.JSON(200, gin.H{
"code": 400,
"msg": "上传失败!不允许超过90M",
})
return
}
fileName := tools.Md5(fmt.Sprintf("%s%s", f.Filename, time.Now().String()))
fildDir := fmt.Sprintf("%s%d%s/", common.Upload, time.Now().Year(), time.Now().Month().String())
isExist, _ := tools.IsFileExist(fildDir)
if !isExist {
os.Mkdir(fildDir, os.ModePerm)
}
filepath := fmt.Sprintf("%s%s%s", fildDir, fileName, fileExt)
c.SaveUploadedFile(f, filepath)
c.JSON(200, gin.H{
"code": 200,
"msg": "上传成功!",
"result": gin.H{
"path": filepath,
"ext": fileExt,
"size": f.Size,
"name": f.Filename,
},
})
}
}上传成功后返回的数据
前端组织成一定的格式调用发送消息接口
attachment[{"name":"常用密码等.doc","ext":".doc","size":10240,"path":"/static/upload/2023May/d485621f517c97abc255dd143b0464ba.doc"}]
展示的时候使用js去替换成一定的html字符串，写上样式进行展示
代码语言：javascript复制function replaceContent (content,baseUrl) {// 转义聊天内容中的特殊字符
if(typeof baseUrl=="undefined"){
baseUrl="";
}
var faces=placeFace();
content = (content || '')
.replace(/face[(.*?)]/g, function (face) { // 转义表情
var alt = face.replace(/^face/g, '');
return '<img alt="' alt '" title="' alt '" src="' baseUrl faces[alt] '">';
})
.replace(/img[(.*?)]/g, function (face) { // 转义图片
var src = face.replace(/^img[/g, '').replace(/]/g, '');;
return '<img onclick="bigPic(src,true)" src="' baseUrl src '" style="max-width: 150px"/></div>';
})
.replace(/n/g, '<br>'); // 转义换行
content=replaceAttachment(content);
return content;
}
//替换附件展示
function replaceAttachment(str){
return str.replace(/attachment[(.*?)]/g, function (result) {
var mutiFiles=result.match(/attachment[(.*?)]/)
if (mutiFiles.length<2){
return result;
}
//return result;
var info=JSON.parse(mutiFiles[1])
var imgSrc="";
switch(info.ext){
case ".mp3":
imgSrc="/static/images/ext/MP3.png";
break;
case ".zip":
imgSrc="/static/images/ext/ZIP.png";
break;
case ".txt":
imgSrc="/static/images/ext/TXT.png";
break;
case ".7z":
imgSrc="/static/images/ext/7z.png";
break;
case ".bpm":
imgSrc="/static/images/ext/BMP.png";
break;
case ".png":
imgSrc="/static/images/ext/PNG.png";
break;
case ".jpg":
imgSrc="/static/images/ext/JPG.png";
break;
case ".jpeg":
imgSrc="/static/images/ext/JPEG.png";
break;
case ".pdf":
imgSrc="/static/images/ext/PDF.png";
break;
case ".doc":
imgSrc="/static/images/ext/DOC.png";
break;
case ".docx":
imgSrc="/static/images/ext/DOCX.png";
break;
case ".rar":
imgSrc="/static/images/ext/RAR.png";
break;
case ".xlsx":
imgSrc="/static/images/ext/XLSX.png";
break;
case ".csv":
imgSrc="/static/images/ext/XLSX.png";
break;
default:
imgSrc="/static/images/ext/default.png";
break;
}
var html= `<div onclick="window.open('` info.path `')" class="productCard">
<div><img src='` imgSrc `' style='width: 38px;height: 38px;' /></div>
<div class="productCardTitle">
<div class="productCardTitle">` info.name `</div>
<div style="font-size: 12px;color: #666">` formatFileSize(info.size) `</div>
</div>
</div>`;
return html;
})
}
function formatFileSize(fileSize) {
if (fileSize < 1024) {
return fileSize 'B';
} else if (fileSize < (1024*1024)) {
var temp = fileSize / 1024;
temp = temp.toFixed(2);
return temp 'KB';
} else if (fileSize < (1024*1024*1024)) {
var temp = fileSize / (1024*1024);
temp = temp.toFixed(2);
return temp 'MB';
} else {
var temp = fileSize / (1024*1024*1024);
temp = temp.toFixed(2);
return temp 'GB';
}
}效果就是上面第一张图里的样子
开源代码库地址：
https://github.com/taoshihan1991/go-fly
线上商用官网演示地址：
https://gofly.v1kf.com
