feat: 分片上传

src/App.vue

@@ -2,7 +2,7 @@
  * @Author: astar
  * @Date: 2020-09-09 16:50:59
  * @LastEditors: astar
- * @LastEditTime: 2021-07-04 17:40:39
+ * @LastEditTime: 2022-01-15 02:19:00
  * @Description: 入口页面
  * @FilePath: \vue-chat\src\App.vue
 -->
@@ -14,7 +14,23 @@
 
 <script>
 export default {
-  name: "app"
+  name: "app",
+  // created () {
+  //   // 监听serviceworker更新
+  //   document.addEventListener('swUpdated', this.showRefreshUI, { once: true })
+  // },
+  // methods: {
+  //   showRefreshUI (e) {
+  //     console.log('通知用户刷新页面，获取最新版本', e)
+  //     console.log(e.sw)
+  //     // 激活新的sw
+  //     // skipWaiting，搭配clientsClaim，新sw获取了页面控制权
+  //     // 通知用户让他们选择是否立马刷新页面 // 防止出现前面操作由旧sw控制，后面由新sw控制的情况
+  //   }
+  // },
+  // beforeDestroy () {
+  //   document.removeEventListener('swUpdated', this.showRefreshUI, { once: true })
+  // }
 };
 </script>
 

src/components/uploadImg/index.vue

@@ -62,26 +62,43 @@ export default {
       this.$refs.input.click();
     },
     change (e) {
-      const _this = this;
-      var fileReader = new FileReader();
       this.file = e.target.files[0];
-      fileReader.readAsDataURL(this.file);
-      fileReader.onload = function () {
-        _this.dataURL = this.result;
-        _this.$emit('change', this.result);
+      this.dataURL.startsWith('blob:') && URL.revokeObjectURL(this.dataURL)
+      this.dataURL = URL.createObjectURL(this.file);
+      this.$emit('change', this.dataURL);
+    },
+    // 切片
+    sliceToChunks (file, piece = 1024 * 1024 * 5) {
+      console.log(file)
+      let totalSize = file.size
+      let start = 0
+      let end = piece
+      let chunks = []
+      while (start < totalSize) {
+        chunks.push(file.slice(start, end))
+        start = end
+        end = end + piece
       }
+      return chunks
     },
-    upload () {
-      // return qiniuTokenReq().then((res) => {
-      //   let token = res.data.token;
-      //   const formData = new FormData();
-      //   formData.append('token', token);
-      //   formData.append('file', this.file);
-      //   return qiniuUploadReq(formData);
-      // })
-      const formData = new FormData();
-      formData.append('file', this.file);
-      return uploadImg(formData, { headers: { 'content-type': 'multipart/form-data' }, responseType: 'blob', emulateJSON: true }).then(res => res.data);
+    // 分片上传
+    async upload () {
+      let file = this.file
+      let chunks = this.sliceToChunks(file)
+      let promises = []
+      for (let i = 0, len = chunks.length; i < len; i++) {
+        let formData = new FormData();
+        formData.append('total', file.size)
+        formData.append('file', chunks[i])
+        formData.append('index', i)
+        // 可以算个哈希值
+        formData.append('sign', `${file.lastModified}${file.size}.${file.name.split('.').pop()}`)
+        promises.push(uploadImg(formData, { headers: { 'content-type': 'multipart/form-data' } }).then(({ data }) => data))
+      }
+      const res = await Promise.all(promises.map(p => p.catch(e => {
+        console.log(e)
+      })));
+      return res[0];
     }
   }
 }

src/config/index.js

@@ -7,7 +7,7 @@
  */
 let baseURL = ''
 if (process.env.NODE_ENV === 'development') {
-  baseURL = 'http://localhost:2000/test-proxy'
+  baseURL = 'http://192.168.0.100:2000/test-proxy'
 } else {
   baseURL = 'https://hello-astar.asia/api'
 }

vue.config.js

@@ -25,7 +25,7 @@ module.exports = {
     // https: true,
     proxy: {
       '/test-proxy': {
-        target: 'http://localhost:3000',                                          
+        target: 'http://192.168.0.100:3000',                                          
         pathRewrite: {
           '^/test-proxy': ''
         }