Skip to content

Commit 2648c03

Browse files
yanglbmeyanglbme
committed
feat: update uploadImgDialog component
1 parent 2ce5637 commit 2648c03

File tree

2 files changed

+59
-92
lines changed

2 files changed

+59
-92
lines changed

‎src/api/file.js‎

Lines changed: 54 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -52,25 +52,28 @@ function getDateFilename(filename) {
5252

5353
async function ghFileUpload(content, filename) {
5454
const useDefault = localStorage.getItem("imgHost") === "default";
55-
const config = getConfig(useDefault, "github");
55+
const { username, repo, branch, accessToken } = getConfig(
56+
useDefault,
57+
"github"
58+
);
5659
const dir = getDir();
57-
const url = `https://api.github.com/repos/${config.username}/${config.repo}/contents/${dir}/`;
60+
const url = `https://api.github.com/repos/${username}/${repo}/contents/${dir}/`;
5861
const dateFilename = getDateFilename(filename);
5962
const res = await fetch({
6063
url: url + dateFilename,
6164
method: "put",
6265
headers: {
63-
Authorization: `token ${config.accessToken}`,
66+
Authorization: `token ${accessToken}`,
6467
},
6568
data: {
66-
branch: config.branch,
69+
content,
70+
branch,
6771
message: `Upload by ${window.location.href}`,
68-
content: content,
6972
},
7073
});
7174

72-
const githubResourceUrl = `raw.githubusercontent.com/${config.username}/${config.repo}/${config.branch}/`;
73-
const cdnResourceUrl = `cdn.jsdelivr.net/gh/${config.username}/${config.repo}@${config.branch}/`;
75+
const githubResourceUrl = `raw.githubusercontent.com/${username}/${repo}/${branch}/`;
76+
const cdnResourceUrl = `cdn.jsdelivr.net/gh/${username}/${repo}@${branch}/`;
7477
return useDefault
7578
? res.content.download_url.replace(githubResourceUrl, cdnResourceUrl)
7679
: res.content.download_url;
@@ -81,20 +84,21 @@ async function ghFileUpload(content, filename) {
8184
//-----------------------------------------------------------------------
8285

8386
async function giteeUpload(content, filename) {
84-
const useDefault = JSON.parse(
85-
localStorage.getItem("imgHost") === "default"
87+
const useDefault = localStorage.getItem("imgHost") === "default";
88+
const { username, repo, branch, accessToken } = getConfig(
89+
useDefault,
90+
"gitee"
8691
);
87-
const config = getConfig(useDefault, "gitee");
8892
const dir = getDir();
8993
const dateFilename = getDateFilename(filename);
90-
const url = `https://gitee.com/api/v5/repos/${config.username}/${config.repo}/contents/${dir}/${dateFilename}`;
94+
const url = `https://gitee.com/api/v5/repos/${username}/${repo}/contents/${dir}/${dateFilename}`;
9195
const res = await fetch({
9296
url,
9397
method: "POST",
9498
data: {
95-
access_token: config.accessToken,
96-
branch: config.branch,
97-
content: content,
99+
content,
100+
branch,
101+
access_token: accessToken,
98102
message: `Upload by ${window.location.href}`,
99103
},
100104
});
@@ -114,20 +118,17 @@ function getQiniuToken(accessKey, secretKey, putPolicy) {
114118
}
115119

116120
async function qiniuUpload(file) {
117-
const qiniuConfig = JSON.parse(localStorage.getItem("qiniuConfig"));
118-
const putPolicy = {
119-
scope: qiniuConfig.bucket,
120-
deadline: Math.trunc(new Date().getTime() / 1000) + 3600,
121-
};
122-
const token = getQiniuToken(
123-
qiniuConfig.accessKey,
124-
qiniuConfig.secretKey,
125-
putPolicy
121+
const { accessKey, secretKey, bucket, region, path, domain } = JSON.parse(
122+
localStorage.getItem("qiniuConfig")
126123
);
127-
const dir = qiniuConfig.path ? qiniuConfig.path + "/" : "";
124+
const token = getQiniuToken(accessKey, secretKey, {
125+
scope: bucket,
126+
deadline: Math.trunc(new Date().getTime() / 1000) + 3600,
127+
});
128+
const dir = path ? `${path}/` : "";
128129
const dateFilename = dir + getDateFilename(file.name);
129130
const config = {
130-
region: qiniuConfig.region,
131+
region,
131132
};
132133
const observable = qiniu.upload(file, dateFilename, token, {}, config);
133134
return new Promise((resolve, reject) => {
@@ -139,7 +140,7 @@ async function qiniuUpload(file) {
139140
reject(err.message);
140141
},
141142
complete: (result) => {
142-
resolve(`${qiniuConfig.domain}/${result.key}`);
143+
resolve(`${domain}/${result.key}`);
143144
},
144145
});
145146
});
@@ -151,22 +152,27 @@ async function qiniuUpload(file) {
151152

152153
async function aliOSSFileUpload(content, filename) {
153154
const dateFilename = getDateFilename(filename);
154-
const aliOSSConfig = JSON.parse(localStorage.getItem("aliOSSConfig"));
155+
const {
156+
region,
157+
bucket,
158+
accessKeyId,
159+
accessKeySecret,
160+
cdnHost,
161+
path,
162+
} = JSON.parse(localStorage.getItem("aliOSSConfig"));
155163
const buffer = Buffer(content, "base64");
156164
try {
157-
const dir = `${aliOSSConfig.path}/${dateFilename}`;
165+
const dir = `${path}/${dateFilename}`;
158166
const client = new OSS({
159-
region: aliOSSConfig.region,
160-
bucket: aliOSSConfig.bucket,
161-
accessKeyId: aliOSSConfig.accessKeyId,
162-
accessKeySecret: aliOSSConfig.accessKeySecret,
167+
region,
168+
bucket,
169+
accessKeyId,
170+
accessKeySecret,
163171
});
164172
const res = await client.put(dir, buffer);
165-
return aliOSSConfig.cdnHost == ""
173+
return cdnHost == ""
166174
? res.url
167-
: `${aliOSSConfig.cdnHost}/${
168-
aliOSSConfig.path == "" ? dateFilename : dir
169-
}`;
175+
: `${cdnHost}/${path == "" ? dateFilename : dir}`;
170176
} catch (e) {
171177
return Promise.reject(e);
172178
}
@@ -178,27 +184,29 @@ async function aliOSSFileUpload(content, filename) {
178184

179185
async function txCOSFileUpload(file) {
180186
const dateFilename = getDateFilename(file.name);
181-
const txCOSConfig = JSON.parse(localStorage.getItem("txCOSConfig"));
187+
const { secretId, secretKey, bucket, region, path, cdnHost } = JSON.parse(
188+
localStorage.getItem("txCOSConfig")
189+
);
182190
const cos = new COS({
183-
SecretId: txCOSConfig.secretId,
184-
SecretKey: txCOSConfig.secretKey,
191+
SecretId: secretId,
192+
SecretKey: secretKey,
185193
});
186194
return new Promise((resolve, reject) => {
187195
cos.putObject(
188196
{
189-
Bucket: txCOSConfig.bucket,
190-
Region: txCOSConfig.region,
191-
Key: `${txCOSConfig.path}/${dateFilename}`,
197+
Bucket: bucket,
198+
Region: region,
199+
Key: `${path}/${dateFilename}`,
192200
Body: file,
193201
},
194202
function (err, data) {
195203
if (err) {
196204
reject(err);
197-
} else if (txCOSConfig.cdnHost) {
205+
} else if (cdnHost) {
198206
resolve(
199-
txCOSConfig.path != ""
200-
? `${txCOSConfig.cdnHost}/${txCOSConfig.path}/${dateFilename}`
201-
: `${txCOSConfig.cdnHost}/${dateFilename}`
207+
path == ""
208+
? `${cdnHost}/${dateFilename}`
209+
: `${cdnHost}/${path}/${dateFilename}`
202210
);
203211
} else {
204212
resolve(`https://${data.Location}`);

‎src/components/CodemirrorEditor/uploadImgDialog.vue‎

Lines changed: 5 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -518,8 +518,11 @@ export default {
518518
519519
// 图片上传前的处理
520520
beforeUpload(file) {
521-
if (!this.validateConfig()) {
522-
return;
521+
const imgHost = localStorage.getItem("imgHost");
522+
const config = localStorage.getItem(`${imgHost}Config`);
523+
if (!config && imgHost !== "" && imgHost !== "default") {
524+
this.$message.error(`请先配置 ${imgHost} 图床参数`);
525+
return false;
523526
}
524527
525528
this.uploadingImg = true;
@@ -538,50 +541,6 @@ export default {
538541
});
539542
return false;
540543
},
541-
validateConfig() {
542-
let checkRes = true,
543-
errMessage = "";
544-
545-
switch (localStorage.getItem("imgHost")) {
546-
case "github":
547-
checkRes =
548-
this.formGitHub.repo && this.formGitHub.accessToken;
549-
errMessage = checkRes ? "" : "请先配置 GitHub 图床参数";
550-
break;
551-
case "gitee":
552-
checkRes =
553-
this.formGitee.repo && this.formGitee.accessToken;
554-
errMessage = checkRes ? "" : "请先配置 Gitee 图床参数";
555-
break;
556-
case "aliOSS":
557-
checkRes =
558-
this.formAliOSS.accessKeyId &&
559-
this.formAliOSS.accessKeySecret &&
560-
this.formAliOSS.bucket &&
561-
this.formAliOSS.region;
562-
errMessage = checkRes ? "" : "请先配置阿里云 OSS 参数";
563-
break;
564-
case "txCOS":
565-
checkRes =
566-
this.formTxCOS.secretId &&
567-
this.formTxCOS.secretKey &&
568-
this.formTxCOS.bucket &&
569-
this.formTxCOS.region;
570-
errMessage = checkRes ? "" : "请先配置腾讯云 COS 参数";
571-
break;
572-
case "qiniu":
573-
checkRes =
574-
this.formQiniu.accessKey &&
575-
this.formQiniu.secretKey &&
576-
this.formQiniu.bucket &&
577-
this.formQiniu.domain &&
578-
this.formQiniu.region;
579-
errMessage = checkRes ? "" : "请先配置七牛云 Kodo 参数";
580-
break;
581-
}
582-
errMessage && this.$message.error(errMessage);
583-
return checkRes;
584-
},
585544
},
586545
};
587546
</script>

0 commit comments

Comments
 (0)