场景：上传一个源数据Excel文件，然后根据数据处理生成另外一个Excel文件并支持下载

Django：

1.首先在Django的settings.py文件中增加配置

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

2.项目的urls.py中增加

url(r'^media/(?P.*)$', serve, {"document_root": MEDIA_ROOT}),

3.在APP的models.py中内容

# 文件模型
class TestTrafficFileModel(models.Model):id = models.AutoField(verbose_name='id主键', primary_key=True, help_text='id主键')upload_name = models.CharField(max_length=50, verbose_name='源数据文件名称', help_text='源数据文件名称')upload_file = models.FileField(upload_to='uploads/', verbose_name='上传文件路径', help_text='上传文件路径')handle_name = models.CharField(max_length=50, verbose_name='处理后文件名称', help_text='处理后文件名称')handle_file = models.FileField(upload_to='uploads/', verbose_name='数据处理文件路径', help_text='数据处理文件路径')upload_time = models.DateTimeField(auto_now_add=True, verbose_name='上传时间', help_text='上传时间')update_time = models.DateTimeField(auto_now=True, verbose_name='更新时间', help_text='更新时间')class Meta:db_table = 'test_traffic_files_storage'verbose_name = '测试工具文件存放表'verbose_name_plural = verbose_nameordering = ('id',)def __str__(self):return self.name

4.在APP的serializers.py中的内容

class FilesSerializer(serializers.ModelSerializer):sheet_name = serializers.CharField(label='sheet表名', read_only=True)class Meta:model = models.TestTrafficFileModelfields = '__all__'extra_kwargs = {"id": {"read_only": True},"handle_file": {"read_only": True},"handle_name": {"read_only": True},"upload_time": {"format": "%Y-%m-%d %H:%M:%S"},"update_time": {"format": "%Y-%m-%d %H:%M:%S"},}def create(self, validated_data):instance = super(FilesSerializer, self).create(validated_data)# 上传源数据内的sheet表名instance.sheet_name = instance.upload_name.replace('_', ' ').split('.')[0]# 因上传后，实际表名与上传表名有区别，需将上传表名设置成实际表名instance.upload_name = str(instance.upload_file).split('/')[1]return instance

5.在APP的views.py中的内容

class DataHandleViewSet(ModelViewSet):queryset = models.TestTrafficFileModel.objects.all()serializer_class = serializers.FilesSerializerordering_fields = ['id']def create(self, request, *args, **kwargs):response = super().create(request, *args, **kwargs)log.info(response)id = response.data.get('id')sheet_name = response.data.get('sheet_name')excel_name = response.data.get('upload_name')# 对数据做处理后返回表的title和表源数据列表res = handle_excel_data(file=f'media/uploads/{excel_name}',sheet_name=sheet_name)# 生成新的Excel后返回新的表名handle_file = genttle_sm_analysis_excel(*res)# 获取新表文件名handle_name = handle_file.split('/')[1]# 将新表文件名和文件地址写入数据库self.get_queryset().filter(id=id).update(handle_name=handle_name,handle_file=handle_file)return response

Vue前端methods内容

// 下载文件

    cellClick({ row, column, cell, event }) {

      if (column.label === '数据处理后的文件') {

        window.open(row.handle_file)

      }

    },

    // 上传文件

    uploadFile() {

      const uploadForm = new FormData() // 一个formdata

      const files = this.$refs.upload.$refs.uploadExcelForm.uploadFiles[0].raw // 获取文件数据

      const name = this.$refs.upload.$refs.uploadExcelForm.uploadFiles[0].name // 获取文件数据

      uploadForm.append('upload_file', files)

      uploadForm.append('upload_name', name)

      this.loading = true

      file_uploads(uploadForm).then(res => {

        this.loading = false

        this.uploadVisible = false

        this.getTableData()

        this.$message.success('操作成功!')

      }).catch(res => {

        this.loading = false

        this.$message.warning(res.data)

      })

    },