广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue与django(drf)实现文件上传下载功能全过程
  • 788
分享到

vue与django(drf)实现文件上传下载功能全过程

django文件上传下载django文件上传django配合vue 2023-02-23 11:02:45 788人浏览 独家记忆
摘要

目录文件上传功能上传后端部分上传前端部分(Vue添加vue.js和node.js,设置eslint)文件下载功能下载后端部分下载前端部分总结文件上传功能 上传后端部分 (一)Mode

文件上传功能

上传后端部分

(一)Models.py

from Django.db import models

class FilesModel(models.Model):                         //模型名(默认表名)
	name = models.CharField(max_length=20, default='')      //name,fle是字段名(file为上传的文件)
    file = models.FileField(upload_to='uploads/')         //upload上传功能实现,to上传后保存的路径

    class Meta:
        db_table = 'files_storage'             //自定义的表名
        ordering = ['-id']                     //按顺序排列

(二)Serializer.py

使用 DjanGo REST framework 实现后端 REST api,需创建序列化器 serializers.py,内容如下:

from rest_framework import serializers
from files import models                           //files 是 app 的名字

class FilesSerializer(serializers.ModelSerializer):
    class Meta:
        model = models.FilesModel                      //指定模型
        fields = '__all__'                             //指定序列化的字段名

(三)views.py

from rest_framework.viewsets import ModelViewSet
from files import models, serializers

class FileViewSet(ModelViewSet):
    queryset = models.FilesModel.objects.all()             //返回全部字段
    serializer_class = serializers.FilesSerializer         //指定序列化器类型

(四)urls

1.项目总配置路径下(settings.py 所在的路径)编辑根路由配置文件 urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('storage/', include('files.urls'))         //网址前缀及指定某子app的url
]

2.app为files 的路径下新建 urls.py 文件,填写路由配置:

from django.urls import include, path
from rest_framework import routers
from files import views

router = routers.DefaultRouter()
router.reGISter(r'files', views.FileViewSet)                   //注册路径

urlpatterns = [
    path('', include(router.urls))
]

(五)测试后端api

运行后台服务 python manage.py runserver 0.0.0.0:8000,访问 Http://xx.xx.xx.xx:8000/storage/files/,界面如下:

上传前端部分(vue添加vue.jsnode.js,设置eslint)

<template>
  <div>
    <el-label>名称</el-label>
    <el-input v-model="fileData.name" style="width: 20%" />
    <el-upload
      ref="upload"
      drag
      class="upload-demo"
      action="http://xx.xx.xx.xx:8000/storage/files/"
      :data="fileData"
      :auto-upload="false"
      :on-success="onSuccess"
      style="padding: 30px"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
    </el-upload>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  </div>
</template>

<script>

export default {
  name: 'UploadDemo',
  data() {
    return {
      fileData: {
        name: ''
      }
    }
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit()
    },
    onSuccess() {
      this.$message.success('上传成功')
    }
  }
}
</script>

其中 el-upload 组件的 action 属性用于指定后台 API 的 URI;

:auto-upload 属性用于设置是否自动上传(这里设置为 false,手动触发上传动作);

:on-success 属性用于指定上传成功后触发的方法。

submitUpload() 中的 this.$refs.upload.submit() 方法触发文件上传动作。

其中 el-upload 组件的 :data 属性用于指定文件上传时附加的数据(类型为 javascript 对象)。

注意:

1.env.development文件里改成BASE_API = ‘/api’

2.除增删改查外,上传的接口在index.vue文件里写了,不用额外在api文件夹里加接口

3.route里的函数调用后端接口

4.前端一个页面可对应后端多个接口

上传完成,后台数据如下:

[
    {
        "file": "http://172.20.23.34:8000/storage/files/uploads/AnyDesk.exe",
        "id": 19,
        "name": "测试文件"
    },
    {
        "file": "http://172.20.23.34:8000/storage/files/uploads/template.html",
        "id": 18,
        "name": ""
    },
    {
        "file": "http://172.20.23.34:8000/storage/files/uploads/20171215091830_55126_hSnPtZR.png",
        "id": 17,
        "name": ""
    }
]

文件下载功能

下载后端部分

views.py

    @action(methods=['get', 'post'], detail=True)
    def download(self, request, pk=None, *args, **kwargs):
        file_obj = self.get_object()
        response = FileResponse(open(file_obj.file.path, 'rb'))
        return response

下载前端部分

download.vue

<template>
  <el-table
    :data="filelist.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%"
  >
    <el-table-column
      label="序号"
      prop="id"
    />
    <el-table-column
      label="上传时间"
      prop="date"
    />
    <el-table-column
      label="上传用户"
      prop="auther"
    />
    <el-table-column
      label="文件名"
      prop="filename"
    />
    <el-table-column
      align="right"
    >
      <template slot="header">
        <el-input
          v-model="search"
          size="mini"
          placeholder="输入关键字搜索"
        />
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleDown(scope.$index, scope.row)"
        >Down</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { getPkgsList } from '@/api/user'
import { getToken } from '@/utils/auth'
import { delpkg } from '@/api/user'
import axiOS from 'axios'

export default {
  data() {
    return {
      headers: {
        Authorization: 'Bearer ' + getToken()
      },
      // addFORM: {
      //   // 文件的数组
      //   pics: []
      // },
      filelist: [],
      search: '',
      listLoading: true
    }
  },
  created() {
    this.fetchPkgsList()
  },
  methods: {
    handleChange(file, filelist) {
      this.filelist = filelist.slice(-3)
    },
    onSuccess() {
      this.$message.success('上传成功')
    },
    fetchPkgsList() {
      this.listLoading = true
      getPkgsList().then(response => {
        console.log('getPkgsList ========> ', response)
        this.filelist = response.data.results
        this.listLoading = false
      })
    },
    downloadFile(url, options = {}) {
      return new Promise((resolve, reject) => {
        // console.log(`${url} 请求数据,参数=>`, JSON.stringify(options))
        axios.defaults.headers['Authorization'] = 'Bearer ' + getToken()
        axios({
          method: 'post',
          url: url, // 请求地址
          data: options, // 参数
          responseType: 'blob' // 表明返回服务器返回的数据类型
        }).then(
          response => {
            // console.log("下载响应",response)
            resolve(response.data.result)
            debugger
            const blob = new Blob([response.data])
            // console.log(blob)
            // let fileName = Date.parse(new Date()) + '.xlsx'
            // 切割出文件名
            const fileNameEncode = options.filename
            // 解码
            const fileName = decodeURIComponent(fileNameEncode)
            // console.log("fileName",fileName)
            if (window.navigator.msSaveOrOpenBlob) {
              // console.log(2)
              navigator.msSaveBlob(blob, fileName)
            } else {
              // console.log(3)
              var link = document.createElement('a')
              link.href = window.URL.createObjectURL(blob)
              link.download = fileName
              link.click()
              // 释放内存
              window.URL.revokeObjectURL(link.href)
            }
          },
          err => {
            reject(err)
          }
        )
      })
    },
    handleDown(index, row) {
      const postUrl = '/api/files/' + (row.id) + '/download/'
      const params = { filename: row.filename }
      this.downloadFile(postUrl, params)
    },
    handleDelete(index, row) {
      this.listLoading = true
      // const i = this.addForm.pics.findIndex((x) => x.pic === row.file)
      // this.addForm.pics.splice(i, 1)
      this.$confirm(`确定移除 ${row.filename}?`)
      delpkg(row.id).then(response => {
        // console.log('getPkgsList ========> ', response)
        // console.log(index)
        // console.log(this.filelist.length)
        this.filelist = this.filelist.slice(index, 1)
        this.fetchPkgsList()
        // console.log(this.filelist)
        this.listLoading = false
      })
    }
  }

}
</script>

总结

到此这篇关于vue与django(drf)实现文件上传下载功能的文章就介绍到这了,更多相关vue与django文件上传下载内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue与django(drf)实现文件上传下载功能全过程

本文链接: https://www.lsjlt.com/news/197274.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue与django(drf)实现文件上传下载功能全过程
    目录文件上传功能上传后端部分上传前端部分(vue添加vue.js和node.js,设置eslint)文件下载功能下载后端部分下载前端部分总结文件上传功能 上传后端部分 (一)Mode...
    99+
    2023-02-23
    django文件上传下载 django文件上传 django配合vue
  • vue与django如何实现文件上传下载功能
    本篇内容主要讲解“vue与django如何实现文件上传下载功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue与django如何实现文件上传下载功能”吧!文件上传功能上传后端部分(一)Mod...
    99+
    2023-07-05
  • Vue实现文件上传和下载功能
    本文实例为大家分享了Vue实现文件上传和下载功能的具体代码,供大家参考,具体内容如下 1、a标签download属性 在H5中,为a标签新增了一个download属性,来直接文件的...
    99+
    2022-11-12
  • servlet实现文件上传与下载功能
    本文实例为大家分享了servlet实现文件上传与下载的具体代码,供大家参考,具体内容如下 内容 我们分两大模块来进行讲解,即上传的实现,与下载的实现 上传的实现 注意了我们在写上传表...
    99+
    2022-11-11
  • SpringMVC实现文件上传下载的全过程
    目录前言一、通用配置二、实现文件下载,上传功能总结前言 文件的上传和下载都是基于io复制,只不过 文件上传是浏览器向服务器发送报文 文件下载是服务器向浏览器发送报文 提示:以下是本篇...
    99+
    2022-11-12
  • SpringBoot文件上传与下载功能实现详解
    目录前言1、引入Apache Commons FileUpload组件依赖2、设置上传文件大小限制3、创建选择文件视图页面4、创建控制器5、创建文件下载视图页面前言 文件上传与下载是...
    99+
    2022-11-13
    SpringBoot文件上传 SpringBoot文件下载
  • SpringBoot怎么实现文件上传与下载功能
    这篇“SpringBoot怎么实现文件上传与下载功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“SpringBoot怎么实...
    99+
    2023-07-06
  • SpringBoot如何实现文件上传与下载功能
    今天小编给大家分享一下SpringBoot如何实现文件上传与下载功能的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。Sprin...
    99+
    2023-07-02
  • JavaWeb Servlet实现文件上传与下载功能实例
    目录前言项目准备文件上传前台页面文件下载资源准备超链接下载后台实现下载总结前言 在上网的时候我们常常遇到文件上传的情况,例如上传头像、上传资料等;当然除了上传,遇见下载的情况也很多,...
    99+
    2022-11-13
  • java实现文件上传下载功能
    本文实例为大家分享了java实现文件上传下载的具体代码,供大家参考,具体内容如下 1.上传单个文件 Controller控制层 import java.io.File; imp...
    99+
    2022-11-12
  • SpringMVC实现文件上传下载功能
    目录导入需要的依赖包一、单个文件上传二、多个文件上传三、上传文件列表显示四、文件下载今天遇到文件上传的问题,使用Ajax方式进行提交,服务器一直报错The current reque...
    99+
    2022-11-13
  • Servlet如何实现文件的上传与下载功能
    这篇文章给大家分享的是有关Servlet如何实现文件的上传与下载功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。实现条件:需要一个form标签,method为post请求2、form的encType属性值为mu...
    99+
    2023-06-14
  • java实现ftp文件上传下载功能
    本文实例为大家分享了ftp实现文件上传下载的具体代码,供大家参考,具体内容如下package getUrlPic;import java.io.ByteArrayInputStream;import java.io.IOException;...
    99+
    2023-05-31
    ftp 上传 下载
  • SpringBoot实现文件上传下载功能小结
    最近做的一个项目涉及到文件上传与下载。前端上传采用百度webUploader插件。有关该插件的使用方法还在研究中,日后整理再记录。本文主要介绍SpringBoot后台对文件上传与下载的处理。单文件上传// 单文件上传@RequestMapp...
    99+
    2023-05-31
    spring boot 文件上传
  • SpringBoot+微信小程序实现文件上传与下载功能详解
    目录1、文件上传1.1 后端部分1.2 小程序前端部分1.3 实现效果2、文件下载2.1 后端部分2.2 小程序前端部分2.3 实现效果1、文件上传 1.1 后端部分 1.1.1 引...
    99+
    2022-11-13
  • SpringBoot+微信小程序如何实现文件上传与下载功能
    这篇文章主要介绍SpringBoot+微信小程序如何实现文件上传与下载功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、文件上传1.1 后端部分1.1 引入Apache Commons FIleUpload组件依...
    99+
    2023-06-29
  • SpringBoot实现文件上传与下载功能的示例代码
    目录Spring Boot文件上传与下载举例说明1.引入Apache Commons FileUpload组件依赖2.设置上传文件大小限制3.创建选择文件视图页面4.创建控制器5.创...
    99+
    2022-11-13
  • vue3+koa实现文件上传功能的全过程记录
    目录前言:技术引用:前端实现后台实现:引入koa-body,并注册中间件:引入koa-static 进行静态资源访问前台回显图片:遇到的问题:已解决:Token验证问题:proxy代...
    99+
    2023-01-04
    vue进行文件上传 vue3 koa文件上传 vue3 koa
  • shell脚本实现ftp上传下载文件功能
    前段时间工作中需要将经过我司平台某些信息核验数据提取后上传到客户的FTP服务器上,以便于他们进行相关的信息比对核验。由于包含这些信息的主机只有4台,采取的策略是将生成的4个文件汇集到一个主机上,然后iHBkwirJm在这...
    99+
    2022-06-04
    shell脚本ftp上传 shell ftp上传下载文件
  • Java+Selenium实现文件上传下载功能详解
    目录简介上传文件下载文件简介 本文主要讲解java代码如何利用selenium操作浏览器上传和下载文件代码教程。 上传文件 常见的 web 页面的上传,一般使用 input 标签或是...
    99+
    2023-01-09
    Java Selenium文件上传下载 Java Selenium文件上传 Java Selenium文件下载 Java Selenium 上传 下载
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作