使用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()
                formData.append('dict_type',this.dictType)
                formData.append('token', sessionStorage.getItem("token"))
                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"))
                formData.append('dict_type',this.dictType)
                this.axios(
                    {
                        method: 'post',
                        url: '/api/v1/dict/list/upload',
                        data: formData
                    })
                    .then((res) => {
                        console.log(res)
                        //自己后端封装的错误显示，如果没有或者有变动请自行更改
                        if (res.data.code === "000000") {
                            this.$message.success(res.data.message);
                            

                        } else {
                            this.$message.error(res.data.message)
                        }
                    })
            },

go后端

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

//上传
func export(c *gin.Context) {
	//获取文件头
	file, err := c.FormFile("file")
	if err != nil {
		response.FailWithMessage(err.Error(), c)
		return
	}
	//获取文件名
	fileName := file.Filename
	//获取文件后缀名
	fileSuffix := path.Ext(fileName)
	}

关键词：vue,列表,csv,upload,go,使用,实现,前后,后端,文件,上传,下载,直接,照搬