基于Django+Vue实现文件上传下载

一、背景

公司使用的是testlink去维护测试用例，但是因为一些客观原因导致testlink编写测试用例不方便、不易用。同时，testlink的导入只支持xml文件,平常都是大家在excel内编写，然后将excel转为xml，再将xml文件导入到testlink里面。本文只分享上传下载的功能，文件格式内容转换涉及到业务内容就不分享啦。

二、详细信息

• 仅支持上传xls/xlsx文件，如果不是则抛出错误提示

• 支持拖拽上传或点击上传，一次只能上传单个文件

• 上传excel后， 右侧展示其所有sheet的checkbox，选中下载

效果演示：

功能演示

三、上传文件部分

页面展示部分

    
select your Excel here
    
    
    
    
将文件拖到此处，或点击上传
    
只能上传xlsx/xls文件，且不超过5M
    
 

请求接口鉴权

因为上传接口需要鉴权，所以需要在发送网络请求的时候携带认证信息：

 data() {
    return {
      headers: {
        'Authorization': "Token " + this.$auth.token
      }
    }
  },
 mounted() {
     let backURLl
     backURLl = window.VUE_APP_URL.backURL    //上传接口
     this.backUrl=backURLl + "/api/v1/AvatarUpload/"
      },

文件上传校验

避免程序出错，需要限制上传的文件类型和大小，在此实现：

export default{  
  methods: {
    // excel表上传
    handleBefore(file) {
        // 文件类型
      console.log(`上传前校验---`, file)
      const isType = file.type === 'application/vnd.ms-excel'
      const isTypeComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      const fileType = isType || isTypeComputer
      if (!fileType) {
        this.$message.error('上传文件只能是xls/xlsx格式！')
      }
      // 文件大小限制为5M
      const fileLimit = file.size / 1024 / 1024 < 5
      if (!fileLimit) {
        this.$message.error('上传文件大小不超过5M！')
      }
      return fileType && fileLimit
    },
}
}

解析内存文件

常常在使用xlrd模块时，一般都是解析本地的某个实质性、物理的文件。而此处不一样，从前端传送过来，我并不想将其落到磁盘里面，于是直接在内存中直接进行解析文件（InMemoryUploadedFile）

使用方法：

files = request.FILES.get('file')
book = xlrd.open_workbook(filename=None, file_contents=files.read())

整体响应如下：

class AvatarUpload(APIView):
    authentication_classes = (TokenAuthentication,)  # token认证
    permission_classes = (IsAuthenticated,)  # IsAuthenticated 仅通过认证的用户

    def post(self, request):
        '''
        :param request:
        :return:  a list of sheet name
        '''
        files = request.FILES.get('file')
        book = xlrd.open_workbook(filename=None, file_contents=files.read())
        sheetnames = book.sheet_names()
        filename = files.name
        ExcelToXml(book, filename, sheetnames).to_xml()
        return Response(sheetnames)

四、下载文件部分

上传文件之后，能够获得其的sheet页，在页面上勾选，点击下载即可。

页面展示部分

  
There is sheets of Excel!
  

  
    {{city}}
  
  点击下载xml

当勾选或取消勾选选项的时候，需要实时处理数据，保证向后端提供的参数正确：

methods:{
    handleCheckedCitiesChange(value) {
      this.sheetnames=value
      let checkedCount = value.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    async getXML(){
      this.sheetnames.forEach(item=>{
      this.$http.getXML(item).then(res=>{
        let url = this.backUrl +  "?sheetname=" + item
        window.open(url)
      }).catch(err=>{
        this.$message.error("something not found")
      })
    })
}

FileResponse下载文件

在后端下载功能则比较简单了，只需要从指定的目录找到对应的文件，同时在response中设置正确Content-Type、Content-Disposition即可

顺便简单描述一下：

Content-Type：发送端（客户端|服务器）发送的实体的数据类型，常见的text/html,application/json

Content-Disposition：把请求所得的内容存为一个文件的时候提供一个默认的文件名。

实际使用如下：

def get(self, request):
    '''
    :param request:根据参数确认是下载xml文件 还是 demo模板
    :return: a file
    '''
    BASE_DIR = Path(__file__).resolve().parent.parent
    xml_ROOT = os.path.join(BASE_DIR, 'testlink')
    sheetname = request.query_params.get("sheetname")
    demo = "demo.xlsx"
    if sheetname:
        sheetname = sheetname + ".xml"
        filepath = os.path.join(xml_ROOT, sheetname)
    else:
        filepath = os.path.join(xml_ROOT, demo)
    filename = sheetname if sheetname else demo
    if os.path.exists(filepath):
        response = FileResponse(open(filepath, 'rb'))  # 生成文件对象application/msword  application/octet-stream
        response['Content-Type'] = 'application/octet-stream'
        response['Content-Disposition'] = 'attachment;filename ="%s"' % (
            filename.encode('utf-8').decode('ISO-8859-1'))
        return response
    else:
        return Response({"notFound": sheetname}, status=400)