使用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 协议》,转载必须注明作者和本文链接
推荐文章: