文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue与django如何实现文件上传下载功能

2023-07-05 05:37

关注

本篇内容主要讲解“vue与django如何实现文件上传下载功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue与django如何实现文件上传下载功能”吧!

文件上传功能

上传后端部分

(一)Models.py

from django.db import modelsclass 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 serializersfrom files import models                           //files 是 app 的名字class FilesSerializer(serializers.ModelSerializer):    class Meta:        model = models.FilesModel                      //指定模型        fields = '__all__'                             //指定序列化的字段名

(三)views.py

from rest_framework.viewsets import ModelViewSetfrom files import models, serializersclass FileViewSet(ModelViewSet):    queryset = models.FilesModel.objects.all()             //返回全部字段    serializer_class = serializers.FilesSerializer         //指定序列化器类型

(四)urls

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

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

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

from django.urls import include, pathfrom rest_framework import routersfrom files import viewsrouter = 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与django如何实现文件上传下载功能

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

<template>  <div>    <el-label>名称</el-label>    <el-input v-model="fileData.name"  />    <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"          >      <i class="el-icon-upload" />      <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>    </el-upload>    <el-button  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 对象)。

注意:

env.development文件里改成BASE_API = &lsquo;/api&rsquo;

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

route里的函数调用后端接口

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

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

[    {        "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()))"      >    <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如何实现文件上传下载功能”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯