使用Vue+go實現前後端檔案的上傳下載,csv檔案上傳下載可直接照搬

我可是千機傘發表於2020-09-23

直接上程式碼,就是固定用法,只需改動介面等一些資訊就可以。這裡順帶也把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 協議》,轉載必須註明作者和本文連結

相關文章