使用Vue+go实现前后端文件的上传下载,csv文件上传下载可直接照搬

直接上代码,就是固定用法,只需改动接口等一些信息就可以。这里顺带也把token带过去了,

vue前端

//页面代码,使用的是vue ant,每个框架都可以实现,详情请看自己使用框架的wiki
 <a-form-item>
                <a-button type="primary" @click="exports">
                    <a-icon type="download"/>
                    下载
                </a-button>
            </a-form-item>

            <a-form :form="form" enctype="multipart/form-data">

                <a-form-item>
                    <a-upload
                            :multiple="true"
                            :fileList="downloadFiles"
                            :customRequest="Import"

                    >
                        <a-button class="upload-btn" type="primary"> <a-icon type="upload" /> 上传 </a-button>
                    </a-upload>
                </a-form-item>
            </a-form>

  //下载
            exports() {
                const formData = new FormData()
                //附带token
                formData.append('token', sessionStorage.getItem("token"))
                //附带blob请求头
                //也可以附带自己的参数
                formData.append('responseType','blob')
                this.axios(
                    {
                        method: 'post',
                        url: '/api/v1/dict/list/export',
                        data: formData
                    })
                    .then(res=>{
                    let blob = new Blob([res.data], {
                    //因为我实例传输的是csv格式的,按照需求改动
                        type: 'text/csv'
                    });
                        let a = document.createElement('a')
                        // 兼容IE
                        if (!!window.ActiveXObject || "ActiveXObject" in window) {
                            // IE
                            window.navigator.msSaveBlob(blob, "字典列表.csv");
                        } else {
                            // 非IE
                            a.setAttribute("download", "字典列表.csv");
                        }
                        //这边就是模拟个a标签,让他来点击,因为原版的a标签虽然可以实现,但是是为get方法,且不能携带token等信息
                        a.href = window.URL.createObjectURL(blob)
                        document.body.appendChild(a)
                        a.click()
                        URL.revokeObjectURL(a.href)
                        document.body.removeChild(a)

                })
            },
            //上传
            Import (data) {
                const formData = new FormData()
                formData.append('file', data.file)
                formData.append('token', sessionStorage.getItem("token"))
                this.axios(
                    {
                        method: 'post',
                        url: '/api/v1/dict/list/upload',
                        data: formData
                    })
                    .then((res) => {
                        console.log(res)
                    })
            },

go后端

//下载
func upload(c *gin.Context) {
//直接传个文件流到前端即可
    c.File("文件名.csv")
}

//上传,没什么好说的,前端传过来,就会放到后端的根目录下。
func export(c *gin.Context) {
    //获取文件头
    file, err := c.FormFile("file")
    if err != nil {
        fmt.println(err.Error())
    }
    //获取文件名
    fileName := file.Filename
    //获取文件后缀名
    fileSuffix := path.Ext(fileName)
    }
本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!