Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit1b19aea

Browse files
committed
图片上传、删除
1 parentcbfffe5 commit1b19aea

File tree

4 files changed

+65
-40
lines changed

4 files changed

+65
-40
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"build":"node build/build.js"
1515
},
1616
"dependencies": {
17+
"axios":"^0.19.2",
1718
"element-ui":"^2.13.1",
1819
"highlight.js":"^10.0.2",
1920
"marked":"^1.0.0",

‎src/main.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ Vue.use(ElementUI)
1212
Vue.use(mavonEditor)
1313
Vue.config.productionTip=false
1414

15-
/* eslint-disable no-new */
1615
newVue({
1716
router,
1817
render:h=>h(App)

‎src/services/utils/axios.js‎

Lines changed: 19 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,63 +2,47 @@ import axios from 'axios'
22
import{baseUrl}from'../../config/axiosConfig'
33
importElementUIfrom'element-ui'
44

5-
axios.defaults.timeout=60000
6-
axios.defaults.withCredentials=true
7-
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8'
8-
axios.defaults.headers['Access-Control-Allow-Origin']='*'
9-
axios.defaults.headers['Cache-Control']='no-cache,no-store,must-revalidate,max-age=-1,private'
10-
axios.defaults.baseURL=baseUrl
5+
constservice=axios.create({
6+
baseURL:baseUrl
7+
})
8+
9+
service.defaults.timeout=60000
10+
service.defaults.withCredentials=true
11+
service.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8'
12+
service.defaults.headers['Access-Control-Allow-Origin']='*'
13+
service.defaults.headers['Cache-Control']='no-cache,no-store,must-revalidate,max-age=-1,private'
14+
// service.defaults.baseURL = baseUrl
1115

1216
// 请求发送前拦截
13-
axios.interceptors.request.use(config=>{
17+
service.interceptors.request.use(config=>{
1418
consttoken=localStorage.getItem('token')
1519
config.headers.common['Authorization']='Bearer '+token
1620
returnconfig
1721
},error=>{
1822
console.log(error)
1923
Promise.reject(error)
2024
})
21-
// http响应拦截器
22-
axios.interceptors.response.use(res=>{
25+
26+
// 响应拦截器
27+
service.interceptors.response.use(res=>{
2328
returnres
2429
},
2530
error=>{
2631
letmsg
2732
if(error.response.status){
2833
switch(error.response.status){
2934
case400:
30-
msg='请求错误(400),请重新申请'
31-
break
32-
case401:
33-
msg='登录错误(401),请重新登录'
35+
msg='请求错误,请稍后重试'
3436
break
3537
case403:
3638
msg='拒绝访问(403)'
3739
break
3840
case404:
3941
msg='请求出错(404)'
4042
break
41-
case408:
42-
msg='请求超时(408)'
43-
break
4443
case500:
4544
msg='服务器错误(500),请稍后重试!'
4645
break
47-
case501:
48-
msg='服务未实现(501)'
49-
break
50-
case502:
51-
msg='网络错误(502)'
52-
break
53-
case503:
54-
msg='服务不可用(503)'
55-
break
56-
case504:
57-
msg='网络超时(504)'
58-
break
59-
case505:
60-
msg='HTTP版本不受支持(505)'
61-
break
6246
default:
6347
msg='网络连接出错'
6448
}
@@ -74,29 +58,29 @@ error => {
7458

7559
exportdefault{
7660
setAxiosGetPromise:(url,params={})=>{
77-
returnaxios.get(timestamp(url),{params:params}).then(response=>{
61+
returnservice.get(timestamp(url),{params:params}).then(response=>{
7862
returnresponse
7963
}).catch(err=>{
8064
throwerr
8165
})
8266
},
8367
setAxiosPostPromise:(url,data)=>{
84-
returnaxios.post(url,data).then(response=>{
68+
returnservice.post(url,data).then(response=>{
8569
returnresponse
8670
}).catch(err=>{
8771
throwerr
8872
})
8973
},
9074
// 更新全部
9175
setAxiosPutPromise:(url,data)=>{
92-
returnaxios.put(url,data).then(response=>{
76+
returnservice.put(url,data).then(response=>{
9377
returnresponse
9478
}).catch(err=>{
9579
throwerr
9680
})
9781
},
9882
setAxiosDeletePromise:(url,data)=>{
99-
returnaxios.delete(url,{data:data}).then(response=>{
83+
returnservice.delete(url,{data:data}).then(response=>{
10084
returnresponse
10185
}).catch(err=>{
10286
throwerr

‎src/views/newArticle.vue‎

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
<template>
22
<divclass="editor-wrap">
33
<mavon-editorref=md
4-
class="editor"
4+
class="editor isFullScreen"
55
:toolbars="toolbars"
6+
@save="$save"
67
@imgAdd="$imgAdd"
7-
@imgDel="$imgDel"></mavon-editor>
8+
@imgDel="$imgDel">
9+
</mavon-editor>
810
</div>
911
</template>
1012

1113
<script>
12-
import {toolbars }from'../config/axiosConfig'
14+
import {toolbars,baseUrl }from'../config/axiosConfig'
15+
importaxiosfrom'axios'
1316
exportdefault {
1417
data () {
1518
return {
@@ -18,6 +21,42 @@ export default {
1821
},
1922
created () {
2023
24+
},
25+
methods: {
26+
$save (val, render) {
27+
console.log(val, render)
28+
},
29+
$imgAdd (pos, $file) {
30+
// 第一步.将图片上传到服务器.
31+
console.log(pos, $file)
32+
var formdata=newFormData()
33+
formdata.append('file', $file)
34+
axios.defaults.baseURL= baseUrl
35+
axios({
36+
url:'file/upload',
37+
method:'post',
38+
data: formdata,
39+
headers: {'Content-Type':'multipart/form-data' }
40+
}).then((res)=> {
41+
// 第二步.将返回的url替换到文本原位置![...](./0) -> ![...](url)
42+
/**
43+
* $vm 指为mavonEditor实例,可以通过如下两种方式获取
44+
* 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后,`$vm`为`mavonEditor`
45+
* 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>,`$vm`为 `this.$refs.md`
46+
*/
47+
console.log(res)
48+
if (res.data.isSuccess===true) {
49+
this.$refs.md.$img2Url(pos,'http://localhost:1081/'+res.data.file)
50+
this.$message({
51+
message:'图片上传成功',
52+
type:'success'
53+
})
54+
}
55+
})
56+
},
57+
$imgDel (pos) {
58+
console.log('图片路径', pos[0], pos)
59+
}
2160
}
2261
}
2362
</script>
@@ -29,10 +68,12 @@ export default {
2968
height:100%;
3069
}
3170
.editor {
32-
z-index:100!important;
3371
min-height:700px;
3472
height:700px;
3573
margin-top:20px;
3674
margin-bottom:20px;
3775
}
76+
.isFullScreen {
77+
z-index:100;
78+
}
3879
</style>

0 commit comments

Comments
 (0)

[8]ページ先頭

©2009-2025 Movatter.jp