使用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 協議》，轉載必須註明作者和本文連結