🦄 refactor(上传图片模块): API书写方式async简化

hookehuyr
Commit bfdc837427ab15473736c52bf7569d829f0e338a bfdc8374 1 parent cb309081
Showing 4 changed files with 81 additions and 54 deletions
src/api/common.js
src/api/fn.js
src/composables/useUpload.js
src/views/me/handleUser.vue
--- a/src/api/common.js
View file @bfdc837
+++ b/src/api/common.js
View file @bfdc837
 /*
  * @Date: 2022-06-17 14:54:29
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-17 14:58:17
+ * @LastEditTime: 2022-06-18 22:18:46
  * @FilePath: /tswj/src/api/common.js
  * @Description: 通用接口
  */
-import { fn, fetch } from '@/api/fn';
+import { fn, fetch, uploadFn } from '@/api/fn';
 const Api = {
   SMS: '/srv/?a=sms',
+  TOKEN: '/srv/?a=upload',
+  SAVE_FILE: '/srv/?a=upload&t=save_file',
 }
 /**
@@ -17,3 +19,29 @@ const Api = {
  * @returns 
  */
 export const smsAPI = (params) => fn(fetch.post(Api.SMS, params));
+
+/**
+ * @description: 获取七牛token
+ * @param {*} filename 文件名
+ * @param {*} file 图片base64
+ * @returns 
+ */
+export const qiniuTokenAPI = (params) => fn(fetch.stringifyPost(Api.TOKEN, params));
+
+/**
+ * @description: 上传七牛
+ * @param {*}
+ * @returns 
+ */
+export const qiniuUploadAPI = (url, data, config) => uploadFn(fetch.basePost(url, data, config));
+
+/**
+ * @description: 保存图片
+ * @param {*} format
+ * @param {*} hash
+ * @param {*} height
+ * @param {*} width
+ * @param {*} filekey
+ * @returns 
+ */
+export const saveFileAPI = (params) => fn(fetch.stringifyPost(Api.SAVE_FILE, params));
--- a/src/api/fn.js
View file @bfdc837
+++ b/src/api/fn.js
View file @bfdc837
 /*
  * @Date: 2022-05-18 22:56:08
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-06-13 15:22:55
+ * @LastEditTime: 2022-06-18 22:07:50
  * @FilePath: /tswj/src/api/fn.js
  * @Description: 文件描述
  */
 import axios from '@/utils/axios';
 import { Toast } from 'vant';
+import qs from 'Qs'
 /**
  * 网络请求功能函数
@@ -36,6 +37,30 @@ export const fn = (api) => {
     })
 }
+// 七牛返回格式
+export const uploadFn = (api) => {
+  return api
+    .then(res => {
+      if (res.statusText === 'OK') {
+        return res.data || true;
+      } else {
+        // tslint:disable-next-line: no-console
+        console.warn(res);
+        if (!res.data.show) return false;
+        Toast({
+          icon: 'close',
+          message: res.data.msg
+        });
+        return false;
+      }
+    })
+    .catch(err => {
+      // tslint:disable-next-line: no-console
+      console.error(err);
+      return false;
+    })
+}
+
 /**
  * 统一 GET/POST 不同传参形式
  */
@@ -45,5 +70,11 @@ export const fetch = {
   },
   post: function (api, params) {
     return axios.post(api, params)
+  },
+  stringifyPost: function (api, params) {
+    return axios.post(api, qs.stringify(params))
+  },
+  basePost: function (url, data, config) {
+    return axios.post(url, data, config)
   }
 }
--- a/src/composables/useUpload.js
View file @bfdc837
+++ b/src/composables/useUpload.js
View file @bfdc837
+/*
+ * @Date: 2022-05-10 12:15:14
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-06-18 22:30:10
+ * @FilePath: /tswj/src/composables/useUpload.js
+ * @Description: 图片上传模块
+ */
 import { v4 as uuidv4 } from 'uuid';
 import { ref, reactive } from 'vue'
-import axios from '@/utils/axios';
+import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common'
-import { Toast } from 'vant';
-import qs from 'Qs'
-// tslint:disable
 export const useUpload = () => {
   let lock_btn = ref(false); // 保存按钮锁
   let fileList = ref([]);
-  let metaId = ref('');
   let upload_image = reactive({ src: '' });
-  const afterRead = (res) => {
+  const afterRead = async (res) => {
     lock_btn.value = true; // 上传开始, 不能保存
     let affix = uuidv4();
     // 此时可以自行将文件上传至服务器
     let dataURL = res.content;
     let base64url = dataURL.slice(dataURL.indexOf(',') + 1);  // 截取前缀的base64   data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA.......
     // 获取七牛token
-    axios.post('/srv/?a=upload', qs.stringify({
+    const { token, key, code } = await qiniuTokenAPI({ filename: `${affix}_${res.file.name}`, file: base64url });
-      filename: `${affix}_${res.file.name}`,
+    if (code === 1) {
-      file: base64url
-    }))
-      .then(res => {
-        if (res.data.code === 1) {
       let config = {
         headers: {
           'Content-Type': 'application/octet-stream',
-              'Authorization': 'UpToken ' + res.data.token,    // UpToken后必须有一个 ' '(空格)
+          'Authorization': 'UpToken ' + token,    // UpToken后必须有一个 ' '(空格)
         }
       }
       // 上传七牛服务器
-          axios.post('http://upload.qiniup.com/putb64/-1/key/' + res.data.key, base64url, config)
+      const { filekey, hash, image_info } = await qiniuUploadAPI('http://upload.qiniup.com/putb64/-1/key/' + key, base64url, config)
-            .then(res => {
+      if (filekey) {
-              if (res.data.filekey) {
+        // 保存图片
-                let info = res.data;
+        const { data } = await saveFileAPI({ filekey, hash, format: image_info.format, height: image_info.height, width: image_info.width });
-                // 保存图片返回ID
+        upload_image.src = data.src;
-                axios.post('/srv/?a=upload&t=save_file', qs.stringify({
-                  format: info.image_info.format,
-                  hash: info.hash,
-                  height: info.image_info.height,
-                  width: info.image_info.width,
-                  filekey: info.filekey,
-                }))
-                  .then(res => {
-                    upload_image.src = res.data.data.src;
         lock_btn.value = false; // 头像上传完成, 打开锁
-                  })
-                  .catch(err => {
-                    console.error(err);
-                  })
-              } else {
-                console.warn(res);
-                if (!res.data.show) return false;
-                Toast({
-                  icon: 'close',
-                  message: res.data.msg
-                });
       }
-            })
-            .catch(err => {
-              console.error(err);
-            })
-        } else {
-          console.warn(res);
     }
-      })
-      .catch(err => {
-        console.error(err);
-      })
   };
   const beforeDelete = () => { // 删除图片回调
     upload_image.src = '';
@@ -78,7 +47,6 @@ export const useUpload = () => {
     lock_btn,
     fileList,
     upload_image,
-    metaId,
     afterRead,
     beforeDelete
   }
--- a/src/views/me/handleUser.vue
View file @bfdc837
+++ b/src/views/me/handleUser.vue
View file @bfdc837
@@ -38,14 +38,14 @@
 <script setup>
 import { useUpload } from '@/composables/useUpload.js'
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import axios from '@/utils/axios';
 import { Toast } from 'vant';
 import _ from 'lodash'
 import { styleColor } from '@/constant.js';
-const { lock_btn, fileList, upload_image, metaId, afterRead, beforeDelete } = useUpload(); // 上传图片模块
+const { lock_btn, fileList, upload_image, afterRead, beforeDelete } = useUpload(); // 上传图片模块
 const $route = useRoute();
 const $router = useRouter();