Django+Vue实现文件上传下载的项目实践

 更新时间:2023年06月07日 11:27:26   作者:穿越寒冬  
本文主要介绍了Django+Vue实现文件上传下载的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

首先我要实现的页面效果是这样的

 当点击上传文件按钮,弹出上传文件的弹出框,可以上传多个文件,点击确定后才正式开始上传

 点击右侧下载按钮,可以直接下载文件。

上传功能

后端代码

settings.py

MEDIA_ROOT = os.path.join(BASE_DIR, '../upload')
MEDIA_URL = '/upload/'

这段代码表示你上传的文件都会放在你项目根目录的upload文件夹下。

views.py

@api_view(('POST',))
@renderer_classes((TemplateHTMLRenderer, JSONRenderer))
def upload_list(request):
    # 如果项目根目录没有upload文件夹,会自动给你创建一个
    folder_path = settings.MEDIA_ROOT
    if not os.path.exists(folder_path):
        os.makedirs(folder_path)
    files = request.FILES.getlist('file')
    for file in files:
        # 这三行代码就是上传文件的代码
        f = open(settings.MEDIA_ROOT + "/" + file.name, mode='wb')
        for chunk in file.chunks():
            f.write(chunk)
        # 这段代码是我要网数据库里存的一些文件信息,如果不存库的话不用写
        size = file.size
        suffix = file.content_type
        createUser = request.user
        filePath = settings.MEDIA_URL + file.name
        name = file.name
        # 上传完文件记得要关闭
        # 需要注意的一点,如果f.close()这句代码之前,上传文件之后有报错,那你文件是一直被占用的状态,删除也删不掉,所以一定要做好代码顺序
        f.close()
        # 往数据库里存文件信息
        Filemanage.objects.create(size=size, suffix=suffix, create_user=createUser, file_path=filePath, name=name)
    return JsonResponse(OrderedDict([
        ('results', {})
    ], code=status.HTTP_200_OK))

前端代码

<el-upload
          class="upload-demo"
          ref="upload"
          action=""
          :auto-upload="false"
          :http-request="upload"
          :before-upload="beforeAvatarUpload"
          multiple
        >
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>

:ref="upload":必须要写,因为我们是手动上传方式。

:auto-upload="false":这里我设置的不自动上传,如果你没有确定按钮,点击一起上传的需求,那你就把值变为ture,你选完文件后会自动上传。

:http-request="upload":覆盖默认的上传行为,可以自定义上传的实现。

:before-upload="beforeAvatarUpload":上传文件之前的钩子,一般用于限制上传文件大小和类型。

multiple:多文件上传。

methods: {
    beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 200;
        if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过2MB!');
        }
        return isLt2M;
    },
    upload(param) {
        const formData = new FormData()
        formData.append('file', param.file)
        mail.uploadFile(formData).then(response => {
            console.log('上传图片成功')
            this.$refs.upload.clearFiles()
        }).catch(response => {
            console.log(response)
            this.$refs.upload.clearFiles()
        });
    },
}

下载功能

后端代码

def download(request, nid):
    # 通过前台传来的id查出文件名
    row_object = Filemanage.objects.filter(id=nid).first()
    # 文件的相对路径
    file_path = '/upload/' + row_object.name
    # 打开文件
    with open(settings.MEDIA_ROOT + "/" + row_object.name, 'rb') as f:
        response = HttpResponse(f.read())
    # 设置Content-Disposition头以强制浏览器下载文件
    file_name = os.path.basename(file_path)
    response["Content-Type"] = "application/octet-stream"
    response['Content-Disposition'] = f'attachment; filename="{file_name}"'
    return response

前端代码

<el-button
  v-if="permissionList.del"
  size="small"
  type="success "
  @click="download(row)"
>{{ "下载" }}</el-button>
methods: {
    download(row) {
	    this.loading = true;
        // 这块是我封装的axios请求,请求时要带着responseType: 'blob',我会在下面放上我的代码
	    file.requestDownload(row.id).then((response) => {
	      const url = window.URL.createObjectURL(new Blob([response.data]));
	      const link = document.createElement('a');
	      link.href = url;
	      link.setAttribute('download', row.name);
	      document.body.appendChild(link);
	      link.click();
	    })
	    .catch((e) => {
	      console.log(e)
	    });
    },
}
requestDownload(id) {
    return request({
      url: '/tool/download/' + id + '/',
      method: 'get',
      responseType: 'blob'
    })
}

 到此这篇关于Django+Vue实现文件上传下载的项目实践的文章就介绍到这了,更多相关Django Vue文件上传下载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • python矩阵运算,转置,逆运算,共轭矩阵实例

    python矩阵运算,转置,逆运算,共轭矩阵实例

    这篇文章主要介绍了python矩阵运算,转置,逆运算,共轭矩阵实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-05-05
  • Python+opencv 实现图片文字的分割的方法示例

    Python+opencv 实现图片文字的分割的方法示例

    这篇文章主要介绍了Python+opencv 实现图片文字的分割的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • 跟老齐学Python之让人欢喜让人忧的迭代

    跟老齐学Python之让人欢喜让人忧的迭代

    跟一些比较牛X的程序员交流,经常听到他们嘴里冒出一个不标准的英文单词,而loop、iterate、traversal和recursion如果不在其内,总觉得他还不够牛X。当让,真正牛X的绝对不会这么说的,他们只是说“循环、迭代、遍历、递归”,然后再问“这个你懂吗?”。
    2014-10-10
  • python必备库Matplotlib画图神器

    python必备库Matplotlib画图神器

    这篇文章主要介绍了python必备库Matplotlib画图神器,Matplotlib 是 Python 中最受欢迎的数据可视化软件包之一,支持跨平台运行,它是 Python 常用的 2D 绘图库,同时它也提供了一部分 3D 绘图接口,更多详细内容,需要的小伙伴可以参考一下下面文章具体内容
    2022-03-03
  • python使用装饰器作日志处理的方法

    python使用装饰器作日志处理的方法

    今天小编就为大家分享一篇python使用装饰器作日志处理的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-07-07
  • python实现图像处理之PiL依赖库的案例应用详解

    python实现图像处理之PiL依赖库的案例应用详解

    这篇文章主要介绍了python实现图像处理之PiL依赖库的案例应用详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-07-07
  • Python找出9个连续的空闲端口

    Python找出9个连续的空闲端口

    这篇文章主要介绍了Python找出9个连续的空闲端口的方法,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • Python实现数据透视表详解

    Python实现数据透视表详解

    今天小编就为大家分享一篇用Python实现数据的透视表的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-10-10
  • python批量修改图片尺寸,并保存指定路径的实现方法

    python批量修改图片尺寸,并保存指定路径的实现方法

    今天小编就为大家分享一篇python批量修改图片尺寸,并保存指定路径的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-07-07
  • python spilt()分隔字符串的实现示例

    python spilt()分隔字符串的实现示例

    split() 方法可以实现将一个字符串按照指定的分隔符切分成多个子串,本文介绍了spilt的具体使用,感兴趣的可以了解一下
    2021-05-05

最新评论