vue配合webuploader分片上传_vue使用webupload实现分片上传和断点续传

vue配合webuploader分片上传
啥也不说，献上代码
封装upload.vue:

<template>
  <div class="upload"></div>
</template>

<script>
import WebUploader from ".././../../../static/js/webuploader.min";
import { httpUrl } from "../../../api/http_url";
import { v4 as uuidv4 } from "uuid";
import md5 from "js-md5";
export default {
  name: "vue-upload",
  props: {
    accept: {
      type: Object,
      default: null
    },
    // 上传地址
    url: {
      type: String,
      default: httpUrl.fenP
    },
    // 上传最大数量 默认为100
    fileNumLimit: {
      type: Number,
      default:1000000
    },
    // 大小限制 默认2M
    fileSingleSizeLimit: {
      type: Number,
      default: 5 * 1024 * 1024
    },
    // 上传时传给后端的参数，一般为token，key等
    formData: {
      type: Object,
      default: {
        // md5:this.uploader.md5File( files )
        md5: null
      }
    },
    // 生成formData中文件的key，下面只是个例子，具体哪种形式和后端商议
    // keyGenerator: {
    //   type: Function,
    //   default(file) {
    //     const currentTime = new Date().getTime();
    //     const md5 = md5(file.name)
    //     return md5;
    //   }
    // },
    multiple: {
      type: Boolean,
      default: true
    },
    // 上传按钮ID
    uploadButton: {
      type: String,
      default: httpUrl.fenP
    },
   
    
  },
  data() {
    return {
      uploader: null,
      md5: null,
      imgAideo:[]
    };
  },
  mounted() {
    this.initWebUpload();
  },

  methods: {

    initWebUpload() {
      // var md5 = uuidv4();
      // this.formData.md5 = md5;
      // sessionStorage.setItem("md5", md5);
   const _this = this
      this.uploader = WebUploader.create({
        auto: true, // 选完文件后，是否自动上传
        swf: "/static/lib/webuploader/Uploader.swf", // swf文件路径
        server: this.url, // 文件接收服务端
        pick: {
          id: this.uploadButton, // 选择文件的按钮
          multiple: this.multiple, // 是否多文件上传 默认false
          label: ""
        },
        accept: this.getAccept(this.accept), // 允许选择文件格式。
        threads:1,
        fileNumLimit: this.fileNumLimit, // 限制上传个数
        //fileSingleSizeLimit: this.fileSingleSizeLimit, // 限制单个上传图片的大小
        formData: this.formData, // 上传所需参数
        chunked: true, //分片上传
        chunkSize: this.fileSingleSizeLimit, //分片大小
        resize : false,  
        duplicate: true // 重复上传
      });

      // 当有文件被添加进队列的时候，添加到页面预览
      this.uploader.on("fileQueued", file => {
        this.$emit("fileChange", file);
        
      });

      this.uploader.on("uploadStart", file => {
        // 在这里可以准备好formData的数据
        this.uploader.options.formData.md5 = md5(file.name);
      });

      // 文件上传过程中创建进度条实时显示。
      this.uploader.on("uploadProgress", (file, percentage) => {
        this.$emit("progress", file, percentage);
      });

      this.uploader.on("uploadSuccess", (file, response) => {
        this.$emit("success", file, response);
      });

      this.uploader.on("uploadError", (file, reason) => {
        console.error(reason);
        this.$emit("uploadError", file, reason);
      });

      this.uploader.on("error", type => {
        let errorMessage = "";
        if (type === "F_EXCEED_SIZE") {
          this.$message.error(
            `文件大小不能超过${this.fileSingleSizeLimit / (1024 * 1000)}M`
          );
        } else if (type === "Q_EXCEED_NUM_LIMIT") {
          this.$message.error("文件上传已达到最大上限数");
        } else {
          this.$message.error(`上传出错！请检查后重新上传！错误代码${type}`);
        }

        console.error(errorMessage);
        this.$emit("error", errorMessage);
      });

      this.uploader.on("uploadComplete", (file, response) => {
          this.$emit("finshed", file);
      });

     
    },
    

    upload(file) {
      this.uploader.upload(file);
    },
    stop(file) {
      this.uploader.stop(file);
    },
    cancelFile(file) {
      this.uploader.cancelFile(file);
    },
    removeFile(file, bool) {
      
      this.uploader.removeFile(file, bool);
    },

    getAccept(accept) {
      switch (accept) {
        case "video":
          return {
            title: "Videos",
            exteensions: "mp4,mp3,avi",
            mimeTypes: ".mp4,.mp3,.avi"
          };
          break;
        case "image":
          return {
            title: "Images",
            exteensions: "gif,jpg,jpeg,bmp,png,webp,jfif",
            mimeTypes: ".gif,.jpg,.jpeg,.bmp,.png,.webp,.jfif"
          };
          break;
        default:
          return accept;
      }
    }
  }
};
</script>

<style  scoped>
</style>


父组件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191

import vueUpload from “./upload”;//组件
import WebUploader from “…/…/…/…/static/js/webuploader.min”;
mounted() {
setTimeout(() => {
document.getElementsByClassName(
“webuploader-element-invisible”
)[0].style.display = “none”;
}, 10);
},
computed: {
uploader() {
return this.$refs.uploader;
}
},

components: {
vueUpload,
uploader() {
return this.$refs.uploader;
}
},

//调取方法
fileChange(file) {
this.fileList.push(file);
},
onProgress(file, percent) {
if (this.imgs.length > 8) {
this.loading = false;
} else {
this.loading = true;
}
},
onSuccess(file, response) {
this.getImg(file);
},

getImg(file) {
  if (this.imgs.length > 8) {
    this.$message.error("最多可上传9张");
    this.loading = false;
  } else {
    var qs = require("qs");
    var a = md5(file.name);

    this.$axios
      .post(
        httpUrl.merge,
        qs.stringify({
          md5: a,
          fileName: a + "." + file.ext
        })
      )
      .then(res => {
        this.loading = false;
        if (res.data.code == 1) {
          this.$message.success("上传成功");
          this.imgs.push({
            img: res.data.data,
            id: file
          });
         
        } else {
          this.loading = false;
          this.$message.error(res.data.msg_cn);
        }
      });


     
  }
},

fileSize(size) {
  return WebUploader.Base.formatSize(size);
},
fileCategory(ext) {
  let type = "";
  const typeMap = {
    image: ["gif", "jpg", "jpeg", "png", "bmp", "webp", "jfif"],
    video: ["mp4", "mp3", "avi"],
    text: []
  };
  Object.keys(typeMap).forEach(_type => {
    const extensions = typeMap[_type];
    if (extensions.indexOf(ext) > -1) {
      type = _type;
    }
  });
  return type;
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

1

官方文档：http://fex.baidu.com/webuploader/document.html
里面都有方法介绍哦，代码中httpUrl.fenp是后台分片接口哦，httpUrl.merge是后台合并上传哦
不详细，仅供参考，生活不易，小杨叹气！