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

  时间:2020-09-01 10:59:44  阅读量:1.7k+  评论数:0  作者:我可是千机伞

使用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,使用,实现,前后,后端,文件,上传,下载,直接,照搬


相关标签/搜索

nodejs和vue的关系vue是什么软件vue.jsvue教程vue下载列表网列表是什么意思列表网免费发布信息网列表python和一个无向边列表csv文件csv德国牧羊犬俱乐部csv文件用什么打开csv是什么格式文件csv转换为excelcrashlytics upload too muchupload意思upload美剧uploaded是什么意思file-uploadgoogle play下载google翻译google play storegoogle浏览器go golang区别iframe框架使用方法vscode使用教程使用灭火器扑救火灾时要对准火焰的什么部位喷射使用的拼音使用灭火器进行灭火的最佳位置是哪里多线程的实现方式实现中华民族伟大复兴的中国梦实现全体人民共同富裕的宏伟目标最终靠的是实现英语实现中国梦必须前后端全分离和半分离前后的拼音前后鼻音的区别口诀前后造句前后成语后端开发需要学什么后端开发后端培训后端开发需要掌握什么技术后端和前端有什么区别es文件浏览器html文件怎么打开apk文件怎么打开go golang 文件服务器go golang gin 文件下载上传图片太大怎么处理上传图片百度 识别上传下达什么意思上传下达上传视频赚钱的平台科普中国app下载安装设置下载下载进度停在了99%其实和0%是没有区别的下载进度条不动下载进度停在了99%其实和0%是没有区别的什么意思很直接的女生很直接的男人好不好很直接的星座女直接内存访问直接内存访问控制器