Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
bfdc8374 1 parent cb309081

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

Inline Side-by-side
Showing 4 changed files with 81 additions and 54 deletions
/*
* @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));
......
/*
* @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)
}
}
......
/*
* @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 { Toast } from 'vant';
import qs from 'Qs'
import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common'
// 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({
filename: `${affix}_${res.file.name}`,
file: base64url
}))
.then(res => {
if (res.data.code === 1) {
const { token, key, code } = await qiniuTokenAPI({ filename: `${affix}_${res.file.name}`, file: base64url });
if (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)
.then(res => {
if (res.data.filekey) {
let info = res.data;
// 保存图片返回ID
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;
const { filekey, hash, image_info } = await qiniuUploadAPI('http://upload.qiniup.com/putb64/-1/key/' + key, base64url, config)
if (filekey) {
// 保存图片
const { data } = await saveFileAPI({ filekey, hash, format: image_info.format, height: image_info.height, width: image_info.width });
upload_image.src = 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
}
......
......@@ -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();
......