<script> import axios from "axios"; const progressList = []; export default { data() { return { complete: 0, totalSize: 0, cancelHandleList: [] }; }, methods: { upload() { const formData = new FormData(); const fileList = this.$refs.file.files; const self = this; if (! Filelist. length) {alert(" Please select file "); return; } for (var i = 0; i < fileList.length; i++) { formData.append("f1", fileList[i]); } const CancelToken = axios.canceltoken; axios({ method: "post", url: "http://localhost:8100/", headers: { "Content-Type": "multipart/form-data" }, data: formData, onUploadProgress: progressEvent => { let complete = (progressEvent.loaded / progressEvent.total) * 100; this.complete = complete; }, cancelToken: New CancelToken(function executor(c) {// This CancelToken constructor will cancel the request. Then (res => {}). Catch (err => {console.log(err); }); }, submitUpload() { const chunkSize = 1024 * 1024; // fragment size 1M const file = this.$refs.file.files[0]; this.totalSize = file.size; const chunks = []; // Let token = +new Date(); // let name = file.name; let chunkCount = 0; let sendChunkCount = 0; If (file.size > chunkSize) {// Let start = 0, end = 0; while (true) { end += chunkSize; const blob = file.slice(start, end); start += chunkSize; if (! Blob. size) {// Break if truncated data is null; } chunks.push(blob); }} else {chunks.push(file.slice(0)); } chunkCount = chunks.length; For (let I = 0; i < chunkCount; i++) { const fd = new FormData(); // Construct the FormData object fd.append("token", token); fd.append("f1", chunks[i]); fd.append("index", i); this.send(fd, i).then(() => { sendChunkCount += 1; If (sendChunkCount === chunkCount) {// Upload complete, send merge request console.log(" upload complete, send merge request "); const formD = new FormData(); formD.append("type", "merge"); formD.append("token", token); formD.append("chunkCount", chunkCount); formD.append("filename", name); this.send(formD); } }) } }, send(data, index) { const CancelToken = axios.CancelToken; return new Promise((resolve, reject) => { axios({ method: "post", url: "http://localhost:8100/", headers: { "Content-Type": "multipart/form-data" }, data: data, onUploadProgress: ProgressEvent => {// Save the progressList[index] = progressEvent. Loaded; Const complete = progresslist.reduce ((p, c) => p + c); this.complete = (complete / this.totalSize) * 100; }, cancelToken: New CancelToken (c = > {/ / this parameter c is CancelToken inside the constructor function of the request, use this function when the parameters/here/to subscribe to each shard cancellation event enclosing cancelHandleList. Push (c); }) }).then(res => { resolve(); }).catch(err => { console.log(err); }); }); } / / cancel events In turn perform shard cancellation event cancelHandle () {this. CancelHandleList. ForEach (fn = > fn ()); }}}; </script>Copy the code