Skip to content

Sanic 文件上传&下载

文件上传

前端

用的 ElementPlus 的 Upload 上传组件

html
<el-upload 
  v-model:file-list="fileList" 
  :action="fileUploadUrl" 
  accept=".xlsx" 
  :on-success="fileUploadSuccess" 
  :on-error="fileUploadError" 
  :show-file-list="false" 
  :headers="fileUploadHeaders()"
>
  <el-button type="" plain icon="el-icon-upload">批量上传</el-button>
</el-upload>
  • action 为文件上传到后端的地址
  • accept 接受上传的文件类型
  • headers 可以将鉴权的 Authorization 头加上

后端

通过 request.files 来获取文件对象

python
    uploaded_file = request.files.get('file')
    file_content = uploaded_file.body
    # 将文件保存到本地
    with open('./static/123.txt', 'wb') as f:
        f.write(file_content)

文件下载

前端

  1. 直接使用 HTML <a> download 属性;点击链接即可进行下载
    html
    <a href="/logo/w3logo-5.png" download>
  2. 或者在 js 中使用
    js
    var a = document.createElement('a');
    a.href = `${config.API_URL}/static/${fname}`;
    a.download = fname;  // 下载文件的新文件名
    a.click();

后端

HTML <a> download 属性 只适合直接下载静态文件,所以后端需要配置静态路径

python
app.static('/api/v1/static/', './static/')
  • 路由根据前后端的使用来进行设置
  • 如果是要下载根据条件查询的数据,在后端查询到之后保存为静态文件即可