Django+Vue中文件的上传和下载

news2025/11/4 23:52:59

场景：上传一个源数据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<path>.*)$', 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_name
        ordering = ('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.TestTrafficFileModel
        fields = '__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.FilesSerializer
    ordering_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)