Skip to content

Commit 74a6cef

Browse files
fxss5201fxss5201
committedMar 4, 2020
上传图片采用七牛云
1 parent 6979ea9 commit 74a6cef

File tree

7 files changed

+42
-22
lines changed

7 files changed

+42
-22
lines changed
 

‎.env

+5-1
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,8 @@ VUE_APP_friendLink=[{"text": "Github","link": "https://github.com/fxss5201"},{"t
2323
VUE_APP_author=樊小书生
2424

2525
# 页脚备案信息
26-
VUE_APP_record=晋ICP备17012454号
26+
VUE_APP_record=晋ICP备17012454号
27+
28+
# 七牛云上传的 domain
29+
VUE_APP_qiniu_domain=http://upload.qiniup.com
30+
VUE_APP_img_domain=http://img.fxss.work

‎docs/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html lang=zh_CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vue-blog/favicon.ico><title>vue-blog</title><script src="https://pv.sohu.com/cityjson?ie=utf-8"></script><link href=/vue-blog/css/group-about.f1613896.css rel=prefetch><link href=/vue-blog/css/group-about~group-home~group-list.7213465d.css rel=prefetch><link href=/vue-blog/css/group-admin.4303fc93.css rel=prefetch><link href=/vue-blog/css/group-detail.704a2ec8.css rel=prefetch><link href=/vue-blog/css/group-editor.4732e2d7.css rel=prefetch><link href=/vue-blog/css/group-home.1ea2f575.css rel=prefetch><link href=/vue-blog/css/group-list.e0aa04df.css rel=prefetch><link href=/vue-blog/css/group-signIn.f23c9712.css rel=prefetch><link href=/vue-blog/js/group-about.ca6c7464.js rel=prefetch><link href=/vue-blog/js/group-about~group-home~group-list.ffaef8aa.js rel=prefetch><link href=/vue-blog/js/group-admin.3bbdf9e1.js rel=prefetch><link href=/vue-blog/js/group-detail.520bba14.js rel=prefetch><link href=/vue-blog/js/group-editor.66e63940.js rel=prefetch><link href=/vue-blog/js/group-home.639d16e7.js rel=prefetch><link href=/vue-blog/js/group-list.4529e977.js rel=prefetch><link href=/vue-blog/js/group-signIn.ec72b8ae.js rel=prefetch><link href=/vue-blog/css/app.43758a9b.css rel=preload as=style><link href=/vue-blog/css/chunk-vendors.8eacee8b.css rel=preload as=style><link href=/vue-blog/js/app.65abd1e2.js rel=modulepreload as=script><link href=/vue-blog/js/chunk-vendors.1510f57c.js rel=modulepreload as=script><link href=/vue-blog/css/chunk-vendors.8eacee8b.css rel=stylesheet><link href=/vue-blog/css/app.43758a9b.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-blog doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script type=module src=/vue-blog/js/chunk-vendors.1510f57c.js></script><script type=module src=/vue-blog/js/app.65abd1e2.js></script><script>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script><script src=/vue-blog/js/chunk-vendors-legacy.a9de3e9c.js nomodule></script><script src=/vue-blog/js/app-legacy.15e6966f.js nomodule></script></body></html>
1+
<!DOCTYPE html><html lang=zh_CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vue-blog/favicon.ico><title>vue-blog</title><script src="https://pv.sohu.com/cityjson?ie=utf-8"></script><link href=/vue-blog/css/group-about.c1fac219.css rel=prefetch><link href=/vue-blog/css/group-about~group-home~group-list.7213465d.css rel=prefetch><link href=/vue-blog/css/group-admin.3ec8c984.css rel=prefetch><link href=/vue-blog/css/group-detail.704a2ec8.css rel=prefetch><link href=/vue-blog/css/group-editor.06b10932.css rel=prefetch><link href=/vue-blog/css/group-home.1ea2f575.css rel=prefetch><link href=/vue-blog/css/group-list.e0aa04df.css rel=prefetch><link href=/vue-blog/css/group-signIn.f23c9712.css rel=prefetch><link href=/vue-blog/js/group-about.35c63d02.js rel=prefetch><link href=/vue-blog/js/group-about~group-home~group-list.ffaef8aa.js rel=prefetch><link href=/vue-blog/js/group-admin.d31daf7a.js rel=prefetch><link href=/vue-blog/js/group-detail.520bba14.js rel=prefetch><link href=/vue-blog/js/group-editor.8e41cdd8.js rel=prefetch><link href=/vue-blog/js/group-home.639d16e7.js rel=prefetch><link href=/vue-blog/js/group-list.4529e977.js rel=prefetch><link href=/vue-blog/js/group-signIn.ec72b8ae.js rel=prefetch><link href=/vue-blog/css/app.4d665074.css rel=preload as=style><link href=/vue-blog/css/chunk-vendors.8eacee8b.css rel=preload as=style><link href=/vue-blog/js/app.5a334f76.js rel=modulepreload as=script><link href=/vue-blog/js/chunk-vendors.1510f57c.js rel=modulepreload as=script><link href=/vue-blog/css/chunk-vendors.8eacee8b.css rel=stylesheet><link href=/vue-blog/css/app.4d665074.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-blog doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script type=module src=/vue-blog/js/chunk-vendors.1510f57c.js></script><script type=module src=/vue-blog/js/app.5a334f76.js></script><script>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script><script src=/vue-blog/js/chunk-vendors-legacy.a9de3e9c.js nomodule></script><script src=/vue-blog/js/app-legacy.3efad3a9.js nomodule></script></body></html>

‎src/components/PageHeader.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ export default {
146146
return res
147147
},
148148
authorImg () {
149-
return this.userInfo.authorHeadimg ? `${process.env.VUE_APP_host}/${this.userInfo.authorHeadimg}` : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
149+
return this.userInfo.authorHeadimg ? this.userInfo.authorHeadimg : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
150150
}
151151
},
152152
created () {},

‎src/plugins/axios.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ _axios.interceptors.response.use(
8585
pageLoading && pageLoading.close()
8686
}
8787

88-
if (response.data.isok) {
88+
if (response.status === 200 || response.data.isok) {
8989
return response.data
9090
} else {
9191
let errorMessage =

‎src/views/About.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ export default {
142142
})
143143
},
144144
getAuthorImg (author) {
145-
return author.authorHeadimg ? `${process.env.VUE_APP_host}/${author.authorHeadimg}` : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
145+
return author.authorHeadimg ? author.authorHeadimg : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
146146
}
147147
}
148148
}

‎src/views/AdminUser.vue

+18-6
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
<el-form-item label="用户头像">
55
<el-upload
66
ref="headerUpload"
7-
action="/api/vue-blog/addUserHeader"
87
accept="image/png, image/jpeg"
98
list-type="picture-card"
9+
:action="action"
1010
:file-list="fileList"
11-
:data="{ id: $route.params.id }"
11+
:data="{ token, key: `id-${$route.params.id}` }"
1212
:before-upload="beforeAvatarUpload"
1313
:on-success="avatarUploadSuccess">
1414
<i class="el-icon-plus"></i>
@@ -48,6 +48,8 @@ export default {
4848
data () {
4949
return {
5050
headimg: '',
51+
token: '',
52+
action: process.env.VUE_APP_qiniu_domain,
5153
userInfo: {
5254
headimg: '',
5355
name: '',
@@ -93,8 +95,13 @@ export default {
9395
},
9496
created () {
9597
this.apiSelectUserMethod()
98+
this.getToken()
9699
},
97100
methods: {
101+
async getToken () {
102+
const result = await this.axios.get(`/addUserHeader/getToken?id=${this.$route.params.id}`, { showLoading: true })
103+
result.isok && (this.token = result.upToken)
104+
},
98105
async apiSelectUserMethod () {
99106
let result = await apiSelectUser({
100107
authorId: this.$route.params.id
@@ -123,10 +130,15 @@ export default {
123130
return (isJPG || isPNG) && isLt2M
124131
},
125132
avatarUploadSuccess (result) {
126-
if (result.isok) {
127-
this.fileList = [{ url: `${process.env.VUE_APP_host}/${result.data.src}` }]
128-
this.$nextTick(() => {
129-
this.$store.dispatch('tokenGetUserInfo')
133+
if (result.key) {
134+
this.fileList = [{ url: `${process.env.VUE_APP_img_domain}/${result.key}` }]
135+
this.axios.post('/addUserHeader/add', {
136+
id: this.$route.params.id,
137+
headerPath: `${process.env.VUE_APP_img_domain}/${result.key}`
138+
}, { showLoading: true }).then(() => {
139+
this.$nextTick(() => {
140+
this.$store.dispatch('tokenGetUserInfo')
141+
})
130142
})
131143
}
132144
},

‎src/views/Editor.vue

+15-11
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ export default {
6868
data () {
6969
return {
7070
toolbars: toolbars,
71+
token: '',
7172
articleInfo: {
7273
name: '',
7374
nature: '',
@@ -124,6 +125,7 @@ export default {
124125
if (this.$route.params.id) {
125126
this.apiArticleDetailMethod()
126127
}
128+
this.getToken()
127129
},
128130
methods: {
129131
async apiArticleDetailMethod () {
@@ -218,19 +220,21 @@ export default {
218220
this.inputVisible = false
219221
this.inputValue = ''
220222
},
223+
async getToken () {
224+
const result = await this.axios.get('/images/add', { showLoading: true })
225+
result.isok && (this.token = result.upToken)
226+
},
221227
imgAdd (pos, $file) {
228+
const keyname = $file.name.replace(/.*(\.[a-zA-Z]*)/, `article${Date.parse(new Date())}${Math.floor(Math.random() * 100)}$1`)
222229
let formdata = new FormData()
223-
formdata.append('articleId', this.$route.params.id ? this.$route.params.id : 0)
224-
formdata.append('image', $file)
225-
this.axios({
226-
url: `images/add`,
227-
method: 'post',
228-
data: formdata,
229-
headers: { 'Content-Type': 'multipart/form-data' },
230-
showLoading: true,
231-
needAll: true
232-
}).then(res => {
233-
this.$refs.md.$img2Url(pos, `${process.env.VUE_APP_host}/${res.data.src}`)
230+
formdata.append('file', $file)
231+
formdata.append('token', this.token)
232+
formdata.append('key', keyname)
233+
const config = {
234+
headers: { 'Content-Type': 'multipart/form-data' }
235+
}
236+
this.axios.post(process.env.VUE_APP_qiniu_domain, formdata, config).then(res => {
237+
this.$refs.md.$img2Url(pos, `${process.env.VUE_APP_img_domain}/${res.key}`)
234238
}).catch(err => {
235239
console.log(err)
236240
})

0 commit comments

Comments
 (0)
Failed to load comments.