针对上传文件进行处理

2023-12-25 23:44:26 +08:00
parent 4863fcb199
commit f9d84526a2
4 changed files with 8056 additions and 6183 deletions
--- a/src/entry/background.js
+++ b/src/entry/background.js
@@ -1,11 +1,13 @@
 /**
 利用chrome的fetch来避免跨域
 **/
+
+import {getImageMd5} from "@/utils/image";
+
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type == 'api') {
+    let headers = {}, data;
    new Promise((resolve) => {
-      let headers = {};
-      let data = null;
      if (request.needMallId) {
        headers.Mallid = request.mallId;
      }
@@ -25,29 +27,20 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
              formData.append(key + `[${i}]`, subValue)
            })
          } else {
-            if (key == 'image') {
-              let blob = new Blob([request.data[key]], {type: 'application/png'})
-              // formData.append(key,  new Blob([request.data[key]], {type: 'application/png'}))
-              formData.append(key,  blob)
-            } else {
-              formData.append(key, request.data[key])
-            }
+            if (key == "image") {
+              //跳过image的处理
+            } else formData.append(key, request.data[key])
          }
        })
        data = formData
      }
      headers.cookie = getCookie();
-      Promise.resolve().then(() => fetch(request.url, {
-        'headers': headers,
-        'method': 'POST',
-        'referrerPolicy': 'no-referrer',
-        'credentials': 'include',
-        'body': data,
-        'mode': 'cors'
-      })).then((res) => {
-        resolve(res.json());
-      });
-    }).then(sendResponse);
+      if (request.isFormData && !!request.data.image) {//针对图片上传特殊的处理办法
+        getImageMd5(request.data.image).then(res => data.append('image', res.image.blobData)).then(resolve)
+      } else resolve()
+    }).then(() => fetch(request.url, {
+      headers, 'method': 'POST', 'referrerPolicy': 'no-referrer', 'credentials': 'include', 'body': data, 'mode': 'cors'
+    })).then(res => res.json()).then(sendResponse);
  } else if (request.type == 'temuApi') {
    new Promise((resolve) => {
      let headers = {};
@@ -57,12 +50,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
      headers['Content-Type'] = 'application/json';
      headers.cookie = getTemuCookie();
      Promise.resolve().then(() => fetch(request.url, {
-        'headers': headers,
-        'method': 'POST',
-        'referrerPolicy': 'no-referrer',
-        'credentials': 'include',
-        'body': JSON.stringify(request.data),
-        'mode': 'cors'
+        'headers': headers, 'method': 'POST', 'referrerPolicy': 'no-referrer', 'credentials': 'include', 'body': JSON.stringify(request.data), 'mode': 'cors'
      })).then((res) => {
        resolve(res.json());
      }).catch(() => {
@@ -75,10 +63,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
      headers['Content-Type'] = 'text/html';
      //headers.cookie = getTemuCookie();
      Promise.resolve().then(() => fetch(request.url, {
-        'headers': headers,
-        'method': 'GET',
-        'referrerPolicy': 'no-referrer',
-        //'credentials': 'include',
+        'headers': headers, 'method': 'GET', 'referrerPolicy': 'no-referrer', //'credentials': 'include',
        'mode': 'cors'
      })).then((res) => {
        // 创建了一个数据读取器
@@ -87,7 +72,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
        const decoder = new TextDecoder();

        let text = ""
-        reader.read().then(function processText({ done, value }) {
+        reader.read().then(function processText({done, value}) {
          // Result 对象包含了两个属性：
          // done  - 当 stream 传完所有数据时则变成 true
          // value - 数据片段。当 done 为 true 时始终为 undefined
@@ -108,11 +93,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
      headers['Content-Type'] = 'text/html';
      headers.cookie = getAliexpressCookie();
      Promise.resolve().then(() => fetch(request.url, {
-        'headers': headers,
-        'method': 'GET',
-        'referrerPolicy': 'no-referrer',
-        'credentials': 'include',
-        'mode': 'cors'
+        'headers': headers, 'method': 'GET', 'referrerPolicy': 'no-referrer', 'credentials': 'include', 'mode': 'cors'
      })).then((res) => {
        // 创建了一个数据读取器
        const reader = res.body.getReader();
@@ -120,7 +101,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
        const decoder = new TextDecoder();

        let text = ""
-        reader.read().then(function processText({ done, value }) {
+        reader.read().then(function processText({done, value}) {
          // Result 对象包含了两个属性：
          // done  - 当 stream 传完所有数据时则变成 true
          // value - 数据片段。当 done 为 true 时始终为 undefined
@@ -141,27 +122,17 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
      headers['Content-Type'] = 'application/json';
      headers.cookie = getSheinCookie()
      request.params = formatParams(request.params)
-		  let _url = request.url + (request.params ? ('?' + request.params) : '')
+      let _url = request.url + (request.params ? ('?' + request.params) : '')
      Promise.resolve().then(() => fetch(_url, {
-        'headers': headers,
-        'method': request.method,
-        'referrerPolicy': 'no-referrer',
-        'credentials': 'include',
-        'body': JSON.stringify(request.data),
-        'mode': 'cors'
+        'headers': headers, 'method': request.method, 'referrerPolicy': 'no-referrer', 'credentials': 'include', 'body': JSON.stringify(request.data), 'mode': 'cors'
      })).then((res) => {
        resolve(res.json());
      });
    }).then(sendResponse);
  } else if (request.type == 'notify') {
-    chrome.notifications.create(
-        "" + Math.random(), {
-          type: "basic",
-          title: "TEMU助手",
-          message: "您店铺【" + request.mallName + "】的商品【" + request.productName + "】成功加入发货台，请尽快处理",
-          iconUrl: "./icons/48.png"
-        }, null
-    )
+    chrome.notifications.create("" + Math.random(), {
+      type: "basic", title: "TEMU助手", message: "您店铺【" + request.mallName + "】的商品【" + request.productName + "】成功加入发货台，请尽快处理", iconUrl: "./icons/48.png"
+    }, null)
  }

  return true;
@@ -176,31 +147,28 @@ chrome.action.onClicked.addListener(function () {
 });

 chrome.webRequest.onSendHeaders.addListener(details => {
-  if (details.url && (details.url.indexOf('joinDeliveryGoodsOrderPlatform')  != -1)) {
+  if (details.url && (details.url.indexOf('joinDeliveryGoodsOrderPlatform') != -1)) {
    details.requestHeaders.push({
-      name: 'Referer',
-      value: 'https://kuajing.pinduoduo.com/main/order-manage'
+      name: 'Referer', value: 'https://kuajing.pinduoduo.com/main/order-manage'
    })
-    for (let i = 0 ; i < details.requestHeaders.length; i++) {
+    for (let i = 0; i < details.requestHeaders.length; i++) {
      if (details.requestHeaders[i].name == 'Origin') {
        details.requestHeaders[i].value = 'https://kuajing.pinduoduo.com'
        break;
      }
    }
-  } else if (details.url && (details.url.indexOf('mms/userInfo')  != -1)) {
+  } else if (details.url && (details.url.indexOf('mms/userInfo') != -1)) {
    details.requestHeaders.push({
-      name: 'Referer',
-      value: 'https://kuajing.pinduoduo.com/main/order-manage'
+      name: 'Referer', value: 'https://kuajing.pinduoduo.com/main/order-manage'
    })
-    for (let i = 0 ; i < details.requestHeaders.length; i++) {
+    for (let i = 0; i < details.requestHeaders.length; i++) {
      if (details.requestHeaders[i].name == 'Origin') {
        details.requestHeaders[i].value = 'https://kuajing.pinduoduo.com'
        break;
      }
    }
  }
-},
-{urls: ["<all_urls>"]},["requestHeaders", "extraHeaders"]);
+}, {urls: ["<all_urls>"]}, ["requestHeaders", "extraHeaders"]);


 function getCookie() {
@@ -254,4 +222,4 @@ function formatParams(data) {
    arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]))
  }
  return arr.join("&")
-}
+}
--- a/src/utils/image.js
+++ b/src/utils/image.js
@@ -1,49 +1,46 @@
 import SparkMd5 from 'spark-md5'

 export function getImageMd5(imageUrl) {
-    /*return new Promise((resolve, reject) => {
-        fetch(imageUrl).then((response) => response.blob()) // 将响应转换为Blob对象
-          .then((blobData) => {
-            const reader = new FileReader();
-            
-            // 读取Blob对象的内容
-            reader.onloadend = function() {
-                let spark = new SparkMd5()
-                spark.appendBinary(this.result); 
-                let md5 = spark.end()
-                console.log(md5)
-                console.log(this.result)
+  /*return new Promise((resolve, reject) => {
+      fetch(imageUrl).then((response) => response.blob()) // 将响应转换为Blob对象
+        .then((blobData) => {
+          const reader = new FileReader();

-                //resolve({md5, imageData: new File([blobData], 'test.jpeg', {type: blobData.type})});
-                resolve({md5, imageData: this.result});
-            };
-            
-            reader.readAsBinaryString(blobData); // 将Blob对象作为参数传递给FileReader的readAsArrayBuffer()方法
+          // 读取Blob对象的内容
+          reader.onloadend = function() {
+              let spark = new SparkMd5()
+              spark.appendBinary(this.result);
+              let md5 = spark.end()
+              console.log(md5)
+              console.log(this.result)

-            
-          })
+              //resolve({md5, imageData: new File([blobData], 'test.jpeg', {type: blobData.type})});
+              resolve({md5, imageData: this.result});
+          };

-    });*/
+          reader.readAsBinaryString(blobData); // 将Blob对象作为参数传递给FileReader的readAsArrayBuffer()方法

-    return new Promise((resolve, reject) => {
-        fetch(imageUrl).then((response) => response.blob()) // 将响应转换为Blob对象
-          .then((blobData) => {
-            const reader = new FileReader();
-            
-            // 读取Blob对象的内容
-            reader.onloadend = function() {
-                let spark = new SparkMd5.ArrayBuffer()
-                spark.append(this.result); 
-                let md5 = spark.end()

-                //resolve({md5, imageData: new File([blobData], 'test.jpeg', {type: blobData.type})});
-                resolve({md5, imageData: this.result});
-            };
-            
-            reader.readAsArrayBuffer(blobData); // 将Blob对象作为参数传递给FileReader的readAsArrayBuffer()方法
+        })

-            
-          })
+  });*/

-    });
-}
+  return new Promise((resolve) => {
+    fetch(imageUrl).then((response) => response.blob()) // 将响应转换为Blob对象
+      .then((blobData) => {
+        const fileName = imageUrl.match(/\/([^/]+)$/).at(-1)
+        const reader = new FileReader();
+        // 读取Blob对象的内容
+        reader.onloadend = function () {
+          const spark = new SparkMd5.ArrayBuffer()
+          spark.append(reader.result);
+          const md5 = spark.end()
+          // formData.append('md5', md5)
+          //resolve({md5, imageData: new File([blobData], 'test.jpeg', {type: blobData.type})});
+          const image = {blobData, fileName}
+          resolve({md5, image});
+        };
+        reader.readAsArrayBuffer(blobData); // 将Blob对象作为参数传递给FileReader的readAsArrayBuffer()方法
+      })
+  });
+}
--- a/src/view/selection/AliExpressCopy.vue
+++ b/src/view/selection/AliExpressCopy.vue
@@ -2,10 +2,10 @@
  <div>
    <ai-list class="list">
      <ai-title
-        slot="title"
-        title="速卖通采集"
-        tips="请先在当前浏览器登录“拼多多跨境卖家中心”，期间保持登录状态"
-        isShowBottomBorder>
+          slot="title"
+          title="速卖通采集"
+          tips="请先在当前浏览器登录“拼多多跨境卖家中心”，期间保持登录状态"
+          isShowBottomBorder>
      </ai-title>
      <template slot="content">
        <div class="content">
@@ -15,10 +15,10 @@
                <label style="width:80px">店铺：</label>
                <el-select v-model="search.mallId" :clearable="true" @change="search.current =1, getList()" placeholder="请选择店铺" size="small">
                  <el-option
-                    v-for="item in $store.state.mallList"
-                    :key="item.mallId"
-                    :label="item.mallName"
-                    :value="item.mallId">
+                      v-for="item in $store.state.mallList"
+                      :key="item.mallId"
+                      :label="item.mallName"
+                      :value="item.mallId">
                  </el-option>
                </el-select>
              </div>
@@ -33,12 +33,12 @@
            </template>
          </ai-search-bar>
          <ai-table
-            :tableData="tableData"
-            :col-configs="colConfigs"
-            :total="total"
-            style="margin-top: 8px;"
-            :current.sync="search.current" :size.sync="search.size"
-            @getList="getList">
+              :tableData="tableData"
+              :col-configs="colConfigs"
+              :total="total"
+              style="margin-top: 8px;"
+              :current.sync="search.current" :size.sync="search.size"
+              @getList="getList">
            <el-table-column slot="url" label="商品地址" align="left">
              <template slot-scope="scope">
                <div v-if="scope.row.url.startsWith('http')"><a class="el-link el-link--primary" :href="scope.row.url" target="_blank">{{ scope.row.url }}</a></div>
@@ -56,12 +56,12 @@
    </ai-list>

    <ai-dialog
-      title="采集"
-      :visible.sync="copyFromDlgShow"
-      :close-on-click-modal="false"
-      width="790px"
-      customFooter
-      @close="handleClose">
+        title="采集"
+        :visible.sync="copyFromDlgShow"
+        :close-on-click-modal="false"
+        width="790px"
+        customFooter
+        @close="handleClose">
      <ai-copy-from-ali-express v-if="copyFromDlgShow" @onClose="handleClose" @onSuccess="handleSuccess"></ai-copy-from-ali-express>
    </ai-dialog>
  </div>
@@ -70,42 +70,43 @@
 <script>
 import AiCopyFromAliExpress from "@/components/AiCopyFromAliExpress.vue";
 import {sendChromeAPIMessage} from '@/api/chromeApi'
-import { getImageMd5 } from "@/utils/image.js"
-  export default {
-    name: 'NiubiCopy',
-    components: {AiCopyFromAliExpress},
+import {getImageMd5} from "@/utils/image.js"

-    data () {
-      return {
-        search: {
-          current: 1,
-          size: 10,
-          type: '2',
-          mallId: ''
-        },
-        
-        colConfigs: [
-          { slot: 'url', label: '商品地址', align: 'left' },
-          { slot: 'type', label: '来源', width: '100px', align: 'left'},
-          { prop: 'mallName', label: '店铺名称', width: '200px', align: 'left'},
-          { prop: 'createTime', label: '复制时间', width: '180px'}
-        ],
-        tableData: [],
-        total: 0,
-        copyFromDlgShow: false,
-      }
-    },
+export default {
+  name: 'NiubiCopy',
+  components: {AiCopyFromAliExpress},

-    created () {
-      this.getList()
-    },
+  data() {
+    return {
+      search: {
+        current: 1,
+        size: 10,
+        type: '2',
+        mallId: ''
+      },

-    methods: {
-      async getList () {
-        let res2 = await getImageMd5('http://temu.jjcp52.com/dist/test.png')
-        console.log(res2)
-        
-        let res3 = await sendChromeAPIMessage({
+      colConfigs: [
+        {slot: 'url', label: '商品地址', align: 'left'},
+        {slot: 'type', label: '来源', width: '100px', align: 'left'},
+        {prop: 'mallName', label: '店铺名称', width: '200px', align: 'left'},
+        {prop: 'createTime', label: '复制时间', width: '180px'}
+      ],
+      tableData: [],
+      total: 0,
+      copyFromDlgShow: false,
+    }
+  },
+
+  created() {
+    this.getList()
+  },
+
+  methods: {
+    async getList() {
+      const image = 'http://temu.jjcp52.com/dist/test.png'
+      let res2 = await getImageMd5(image), res4
+      Promise.all([
+        sendChromeAPIMessage({
          url: 'marvel-mms/cn/api/kiana/gmp/bg/phoenix/api/material/create',
          needMallId: true,
          mallId: '634418212443160',
@@ -115,53 +116,49 @@ import { getImageMd5 } from "@/utils/image.js"
              {
                materialType: 1,
                materialMd5: res2.md5,
-                materialName: "test.png"
+                materialName: "test"
              }
            ]
          }
-        })
-        let res4 = await sendChromeAPIMessage({
+        }),
+        sendChromeAPIMessage({
          url: 'galerie/business/get_signature?sdk_version=js-0.0.16-alpha.0&tag_name=product-material-tag',
          needMallId: true,
          mallId: '634418212443160',
          data: {
            bucket_tag: "product-material-tag"
          }
-        })
-
-        let res5 = await sendChromeAPIMessage({
-          url: 'https://kuajing-file.pinduoduo.com/api/galerie/v3/store_image?sdk_version=js-0.0.16-alpha.0&tag_name=product-material-tag',
-          isFormData: true,
-          data: {
-            url_width_height: true,
-            image: new Uint8Array(res2.imageData),
-            upload_sign: res4.result.signature
-          }
-        })
-        console.log(res5)
-
-        this.$http.post('/api/copyProduct/myPage',null,{
-            params: {
-                ...this.search
-            }
-        }).then(res => {
-            this.tableData = res.data.records
-            this.total = res.data.total
-        })
-      },
-      beforeCopy() {
-        this.copyFromDlgShow = true
-      },
-      handleClose() {
-        this.copyFromDlgShow = false
-      },
-      // 添加模板成功
-      handleSuccess() {
-        this.copyFromDlgShow = false
-        this.getList()
-      }
+        }).then(res => res4 = res)
+      ]).then(() => sendChromeAPIMessage({
+        url: 'https://kuajing-file.pinduoduo.com/api/galerie/v3/store_image?sdk_version=js-0.0.16-alpha.0&tag_name=product-material-tag',
+        isFormData: true,
+        data: {
+          url_width_height: true,
+          image,
+          upload_sign: res4.result.signature
+        }
+      })).then(() => this.$http.post('/api/copyProduct/myPage', null, {
+        params: {
+          ...this.search
+        }
+      })).then(res => {
+        this.tableData = res.data.records
+        this.total = res.data.total
+      })
+    },
+    beforeCopy() {
+      this.copyFromDlgShow = true
+    },
+    handleClose() {
+      this.copyFromDlgShow = false
+    },
+    // 添加模板成功
+    handleSuccess() {
+      this.copyFromDlgShow = false
+      this.getList()
    }
  }
+}
 </script>

 <style scoped lang="scss">
--- a/yarn.lock
+++ b/yarn.lock