Django+Vue实现文件上传下载功能

目录

前言

上传功能

后端代码

前端代码

下载功能

后端代码

前端代码


前言

首先我要实现的页面效果是这样的Django+Vue实现文件上传下载功能_第1张图片

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

Django+Vue实现文件上传下载功能_第2张图片

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

上传功能

后端代码

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))

前端代码


          点击上传
        

: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

前端代码

{{ "下载" }}
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,python,django,vue.js,文件上传下载)