开源单用户客服系统源码-上传附件功能-elementui 异步上传文件【唯一客服开发商】

之前开源的单用户客服系统，上传附件成功后，还不能展示出文件形式，今天把上传展示出文件形式给开发完善一下。

我想要实现的效果是，展示出文件的名称和大小信息

后端返回一个带有文件信息的json结果，前端把该信息组织一下并解析成可以展示的样子

后端golang部分代码

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字符串，写上样式进行展示

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