vue + python实现大文件分片上传功能

一键写代码

已于 2023-01-17 15:26:57 修改

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

于 2022-08-29 17:46:36 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42991509/article/details/126589444

前端主要代码：
主要查看上传相关。。
vue文件：

<template>
  <vxe-modal
    v-model="show"
    class="add-mark-dialog"
    :title="title"
    width="650"
    height="600"
    :show-footer="true"
    destroy-on-close
    @close="handleClose"
  >
    <div class="main-modal-body">
      <div class="form-wrap">
        <el-form ref="form" :model="form" :rules="rules" label-width="140px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="任务名称：" prop="task_name">
                <el-input v-model="form.task_name" placeholder="请输入任务名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item v-if="type == 'add'" label="上传文件：" prop="file_address">
                <el-upload action :auto-upload="false" :show-file-list="false" :on-change="handleChange">
                  <div class="el-upload__text" style="color:#409EFF;"><i class="el-icon-upload"></i><em>点击上传</em></div>
                  <div class="el-upload__tip" slot="tip">只能上传zip格式文件，且大小不超过 10 GB 的视频</div>
                </el-upload>
                <div class="progress-box">
                  <!-- <span>上传进度：{
   
   {
   
    percent.toFixed() }}%</span> -->
                  <el-progress :percentage="percent"></el-progress>
                  <!-- <el-button type="primary" size="mini" @click="handleClickBtn">{
   
   {
   
    upload | btnTextFilter }}</el-button> -->
                </div>
              </el-form-item>
              <el-form-item v-else-if="type == 'edit'" label="已上传文件：" prop="file_address">
                <span style="word-break: break-all" v-for="(file, index) in imgUrlList" :key="index">{
   
   {
   
   
                  file.real_address
                }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <template v-slot:footer>
      <div class="a-r">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="btnLoading" :disabled="btnLoading">保存</el-button>
      </div>
    </template>
  </vxe-modal>
</template>

<script>
import SparkMD5 from 'spark-md5'
import axios from 'axios'
import {
   
    mapState } from 'vuex'
import util from '@/libs/util'
import {
   
    upload, createImgMarkTask, updateImgMarkTask, chunkMerge } from '../api'
const defaultForm = {
   
   
  task_name: ''
}
export default {
   
   
  name: 'AddModal'</