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

下面我将介绍通过Vue和Django(DRF)实现文件上传下载功能的全过程，包含以下几个步骤：

1. 在Vue中创建文件上传表单并发送请求到Django后端；
2. 在Django后端接收文件并保存到指定目录；
3. 编写Django视图函数实现文件下载功能；
4. 在Vue中调用视图函数完成文件下载。

1. 创建Vue文件上传表单并发送请求到Django后端

我们可以使用 axios 库发送文件上传请求。在表单处理方法中，我们需要创建一个FormData对象来存储文件数据，并调用axios发起POST请求。

以下是一个示例，上传表单中包含一个文件选择按钮和一个提交按钮：

<template>
  <div>
    <form @submit.prevent="uploadFile" enctype="multipart/form-data">
      <label for="file-upload">选择文件:</label>
      <input type="file" id="file-upload" ref="fileUpload" />
      <button type="submit">上传文件</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  methods: {
    async uploadFile() {
      const file = this.$refs.fileUpload.files[0]
      const formData = new FormData()
      formData.append('file', file)
      const response = await axios.post('/api/upload/', formData)
      console.log(response.data)
    }
  }
}
</script>

在上面的示例中，我们使用了async/await语法来让方法异步执行，同时也使用了axios库来发起POST请求。在FormData对象的append方法中，我们指定了文件上传时使用的字段名为'file'。POST请求的URL为'/api/upload/'，该URL需要在Django后端进行路由绑定。

在Django的settings.py文件中，还需要添加如下配置以允许文件上传：

FILE_UPLOAD_HANDLERS = [
    'django.core.files.uploadhandler.MemoryFileUploadHandler',
    'django.core.files.uploadhandler.TemporaryFileUploadHandler',
]

2. 在Django后端接收文件并保存到指定目录

我们可以使用DRF提供的视图来处理文件上传请求。在视图函数中，我们可以使用request.FILES属性来获取上传的文件数据，并调用文件对象的save方法将文件保存到指定目录中。在保存文件的同时，我们可以通过HttpResponse返回包含上传文件路径的JSON数据。

以下是一个示例：

from django.conf import settings
from django.core.files.storage import FileSystemStorage
from django.http import HttpResponse
from rest_framework.decorators import api_view

@api_view(['POST'])
def upload_file(request):
    if request.method == 'POST' and request.FILES.get('file'):
        file = request.FILES['file']
        fs = FileSystemStorage(location=settings.MEDIA_ROOT)
        filename = fs.save(file.name, file)
        file_url = fs.url(filename)
        return HttpResponse({'file_url': file_url})

在上面的代码中，我们使用DRF框架提供的@api_view装饰器将该函数转换为Django视图函数。在request.FILES属性中，我们获取了上传的文件数据。然后，我们使用FileSystemStorage类初始化一个存储文件的对象，并使用save方法将文件保存到设置文件中MEDIA_ROOT指定的目录下。最后，我们通过HttpResponse返回一个JSON对象，其中包含文件的URL地址。

3. 编写Django视图函数实现文件下载功能

当需要下载文件时，我们可以定义一个Django的视图函数，该函数将从服务器提供的文件地址获取文件内容并以HTTP响应的方式返回给客户端浏览器。在文件下载视图函数中，我们首先需要获取要下载文件的路径，然后将该文件以二进制形式打开，并进行读取操作，最后将该文件以HttpResponse的方式返回给客户端。

以下是一个示例：

from django.http import HttpResponse

def download_file(request, file_url):
    # 根据文件URL获取文件路径
    file_path = file_url.replace('/media/', settings.MEDIA_ROOT + '/')
    with open(file_path, 'rb') as f:
        # 将文件以二进制形式读取
        file_data = f.read()
    response = HttpResponse(file_data, content_type='application/octet-stream')
    # 设置响应头，告诉浏览器返回的是附件，并指定文件名
    response['Content-Disposition'] = 'attachment; filename={}'.format(file_url.split('/')[-1])
    return response

在上面的代码中，我们定义了一个download_file视图函数，其参数为file_url。在该函数中，我们首先根据参数值获取真实的文件路径，然后以二进制形式读取文件内容，并将其返回给客户端。在返回时，我们设置了content_type为'application/octet-stream'，告诉浏览器返回的是二进制流，同时在响应头中自定义了'Content-Disposition'参数，告诉浏览器返回的是附件并指定文件名。

4. 在Vue中调用视图函数完成文件下载

在Vue中，我们可以使用a标签来实现文件下载。以下是一个示例，该示例中定义了一个downloadFile方法，该方法被调用时将用户浏览器重定向到Django视图函数中指定的URL地址，从而完成文件下载。

<template>
  <div>
    <button @click="downloadFile(fileUrl)">下载文件</button>
  </div>
</template>

<script>
export default {
  methods: {
    downloadFile(fileUrl) {
      window.location.href = `/api/download/${fileUrl}`
    }
  }
}
</script>

在上面的示例中，我们使用了a标签，通过URL地址的方式来定位Django视图函数并进行文件下载。当下载按钮被点击时，我们调用了downloadFile方法，并将文件URL作为参数传递给该方法。在方法的实现中，我们使用window.location.href来完成页面重定向，从而触发浏览器下载文件的操作。

以上是Vue和Django(DRF)实现文件上传下载功能的完整攻略。在实际开发中，还需要处理一些细节问题，例如文件大小限制、文件类型校验、安全性等问题。