【vue】element-ui 上传文件

前端

• axios api设置

export function project_file_add(data) {
  return request({
    url: '/api/project-file',
    method: 'POST',
    data
  })
}

• 文件覆盖
  
  data

file: {},
fileList: []

/**
       * 文件覆盖
       */
      onChange(file, fileList) {
        if (fileList.length > 1) {
          fileList.splice(0, 1)
        }
      },

• 自动上传
  vue代码

<template>
  <div>
    <el-upload
      drag
      multiple
      :before-upload="beforeAvatarUpload"
      :action="''"
      :data="file"
      :http-request="upload"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
import { project_file_add } from '@/api/project'

export default {
  name: 'Demo',
  data() {
    return {
      file: {
        project: '1'
      },
      uploadurl: ''
    }
  },
  methods: {
    upload(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('project', 1)
      project_file_add(formData).then(_ => {
        this.$message({
          message: '文件上传成功',
          type: 'success',
          showClose: true
        })
      }
      ).catch(_ => {
        this.$message({
          message: '文件上传失败',
          type: 'error',
          showClose: true
        })
      }
      )
    },
    beforeAvatarUpload(file) {
      return true
    },
    submitUpload() {
      this.$refs.upload.submit()
    }
  }
}
</script>

<style scoped>

</style>

• 手动上传
  :auto-upload=“false” 手动上传一定要写明这个属性为false

<template>
  <div>
    <el-upload
      ref="upload"
      drag
      multiple
      :auto-upload="false"
      :before-upload="beforeAvatarUpload"
      :action="''"
      :data="file"
      :http-request="upload"
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-button style="margin-left: 250px;" size="small" type="success" @click="submitUpload">确认上传</el-button>
  </div>
</template>

<script>
import { project_file_add } from '@/api/project'

export default {
  name: 'Demo',
  data() {
    return {
      file: {
        project: '1'
      },
      uploadurl: ''
    }
  },
  methods: {
    upload(param) {
      const formData = new FormData()
      formData.append('file', param.file)
      formData.append('project', 1)
      project_file_add(formData).then(_ => {
        this.$message({
          message: '文件上传成功',
          type: 'success',
          showClose: true
        })
      }
      ).catch(_ => {
        this.$message({
          message: '文件上传失败',
          type: 'error',
          showClose: true
        })
      }
      )
    },
    beforeAvatarUpload(file) {
      return true
    },
    submitUpload() {
      this.$refs.upload.submit()
    }
  }
}
</script>

<style scoped>

</style>

后台

• model

import os

from django.db import models

from python_vfeng_ICDaily_django import settings
from utils.base_mysql_model import BaseMysqlModel


def file_directory_path(instance, filename):
    return os.path.join('uploads', 'project', str(instance.project.id), filename)


class ProjectFileModel(BaseMysqlModel):
    file = models.FileField(upload_to=file_directory_path, null=False, blank=False, verbose_name='文件路径')
    md5 = models.CharField(max_length=36, null=False, blank=False, verbose_name="MD5")
    project = models.ForeignKey('ProjectModel', on_delete=models.CASCADE, related_name='files', null=False, blank=False,
                                verbose_name="项目类型")
    uploader = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, null=False, verbose_name='上传者')

    class Meta:
        verbose_name = '项目附件'
        verbose_name_plural = verbose_name

• view set

from rest_framework import permissions, filters

from project.filters import ProjectFileFilter
from project.models import ProjectFileModel
from project.serializer import ProjectFileSerializer
from utils.api_page_number_pagination import ApiPageNumberPagination
from utils.base_mysql_model_view_set import BaseMysqlModelViewSet


class ProjectFileViewSet(BaseMysqlModelViewSet):
    queryset = ProjectFileModel.objects.all().order_by('-create_time')
    serializer_class = ProjectFileSerializer
    filter_class = ProjectFileFilter

    # permission_classes = (permissions.AllowAny,)
    permission_classes = (permissions.IsAuthenticated,)
    pagination_class = ApiPageNumberPagination

    def create(self, request, *args, **kwargs):
        request.data['md5'] = 'b46a11d5aa530800d8b786527e6a6b5d'  # hashlib.md5(request.FILES['file']).hexdigest()
        request.data['uploader'] = request.user.id
        return super().create(request, *args, **kwargs)

• Serializer

class ProjectFileSerializer(serializers.ModelSerializer):
    uploader_name = serializers.CharField(source='uploader.cn', read_only=True)
    file_name = serializers.SerializerMethodField()
    create_time = serializers.DateTimeField(format='%Y-%m-%d %H:%M:%S', read_only=True)

    class Meta:
        model = ProjectFileModel
        fields = '__all__'

    def get_file_name(self, instance):
        split_str = '/' + str(instance.project.id) + '/'
        return instance.file.name.split(split_str)[-1]