Vue分片上传

浏览网上资料分片上传，试了很多种 webuploader  element分片上传

最后使用vue-simple-uploader 完成上传 

 

<template>

  <div class="hello">

    <div v-if="showVideoPath !=null">

      <video :src="showVideoPath" class="avatar video-avatar" width="400px" controls="controls">您的浏览器不支持视频播放</video>

      <el-button @click="delVideo">删除</el-button>

    </div>

    <uploader v-else :key="uploader_key" :options="options" class="uploader-example" @file-added="onFileAdded" @file-success="onFileSuccess">

      <uploader-unsupport></uploader-unsupport>

      <!-- <uploader-drop> -->

      <uploader-btn :single="true">选择文件</uploader-btn>

      <!-- </uploader-drop> -->

      <uploader-list></uploader-list>

    </uploader>

  </div>

</template>

 

<script>

export default {

  name: 'HelloWorld',

  props: {

    fileList: {

      require: false,

      type: Array,

      default: function () {

        return []

      }

    },

    url: {

      require: true,

      type: String

    },

    type: {

      require: false,

      type: String

    },

    videoPath: {

      require: false,

      type: String,

      default: null

    }   

  },

  data () {

    return {

      showVideoPath: null,

      uploader_key: new Date().getTime(),//这个用来刷新组件--解决不刷新页面连续上传的缓存上传数据（注：每次上传时，强制这个值进行更改---根据自己的实际情况重新赋值）

      options: {

        target: 'http://192.168.0.12:27000/api/dishes/oss/chunkUpload',//SpringBoot后台接收文件夹数据的接口

        testChunks: false,//是否测试分片

        singleFile: true // 单文件上传，若需多文件注释即可

      }

    }

  },

  mounted () {

    this.showVideoPath = this.videoPath

  },

  methods: {

    onFileAdded (file) {

    },

    onFileSuccess: function (rootFile, file, response, chunk) {

      var jsonObj = this.$x2js.xml2js(response);

      this.showVideoPath = jsonObj.JsonResp.data.path

      this.$emit("imgSuccess", jsonObj.JsonResp.data)

    },

    // 删除视频

    delVideo () {

      this.showVideoPath = null

      this.$emit("del")

    }

  }

}

</script>

 

<style>

.uploader-example {

  width: 90%;

  padding: 15px;

  margin: 40px auto 0;

  font-size: 12px;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);

}

 

.uploader-example .uploader-btn {

  margin-right: 4px;

}

 

.uploader-example .uploader-list {

  max-height: 440px;

  overflow: auto;

  overflow-x: hidden;

  overflow-y: auto;

}

</style>

参考文献（大文件上传取不到上传内容，不推荐）1、https://blog.csdn.net/weixin_43805387/article/details/103179255?utm_medium=distribute.pc_relevant_download.none-task-blog-2~default~blogcommendfrombaidu~default-3.nonecase&dist_request_id=1329188.10632.16178643333274585&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-2~default~blogcommendfrombaidu~default-3.nonecas

2、（好东西）https://www.cnblogs.com/xiahj/p/8529545.html 

3、插件源码  https://github.com/shady-xia/Blog/tree/master/vue-simple-uploader