feat: update images upload function

更新图片上传功能,使用新图床,速度更快,感谢图壳
This commit is contained in:
yanglbme 2019-12-11 21:01:02 +08:00
parent 17e0a7d009
commit 336c4d1815
4 changed files with 6 additions and 15 deletions

View File

@ -38,6 +38,8 @@ Markdown 文档自动即时渲染为微信图文,让你不再为微信文章
![custom](./assets/images/doocs-md-custom-css.gif) ![custom](./assets/images/doocs-md-custom-css.gif)
![doocs-md-upload-image](./assets/images/doocs-md-upload-image.gif)
## 示例文章 ## 示例文章
- [ES6 特性快速扫盲](https://mp.weixin.qq.com/s/I3EzOO0skf8xDCGtyYM5Lg) - [ES6 特性快速扫盲](https://mp.weixin.qq.com/s/I3EzOO0skf8xDCGtyYM5Lg)
- [GitHub 项目持续本地化,交给它来做,准没错!](https://mp.weixin.qq.com/s/KO4xHr4EI0YfjF0hiT3pbw) - [GitHub 项目持续本地化,交给它来做,准没错!](https://mp.weixin.qq.com/s/KO4xHr4EI0YfjF0hiT3pbw)

Binary file not shown.

After

Width:  |  Height:  |  Size: 626 KiB

View File

@ -100,7 +100,6 @@ let app = new Vue({
} }
}, },
methods: { methods: {
renderWeChat(source) { renderWeChat(source) {
let output = marked(source, { renderer: this.wxRenderer.getRenderer(this.status) }); let output = marked(source, { renderer: this.wxRenderer.getRenderer(this.status) });
// 去除第一行的 margin-top // 去除第一行的 margin-top
@ -148,7 +147,7 @@ let app = new Vue({
if (response.success) { if (response.success) {
// 上传成功,获取光标 // 上传成功,获取光标
const cursor = this.editor.getCursor(); const cursor = this.editor.getCursor();
const imageUrl = response.data.url const imageUrl = response.data
const markdownImage = `![](${imageUrl})` const markdownImage = `![](${imageUrl})`
// 将 Markdown 形式的 URL 插入编辑框光标所在位置 // 将 Markdown 形式的 URL 插入编辑框光标所在位置
this.editor.replaceSelection(`\n${markdownImage}\n`, cursor); this.editor.replaceSelection(`\n${markdownImage}\n`, cursor);
@ -157,9 +156,7 @@ let app = new Vue({
message: '图片插入成功', message: '图片插入成功',
type: 'success' type: 'success'
}); });
this.refresh(); this.refresh();
} else { } else {
// 上传失败 // 上传失败
this.$message({ this.$message({
@ -172,13 +169,6 @@ let app = new Vue({
failed(error, file, fileList) { failed(error, file, fileList) {
console.log(error) console.log(error)
}, },
uploading(event, file, fileList) {
this.$message({
showClose: true,
message: '图片上传中...',
type: 'info'
});
},
// 刷新右侧预览 // 刷新右侧预览
refresh() { refresh() {
this.output = this.renderWeChat(this.editor.getValue(0)); this.output = this.renderWeChat(this.editor.getValue(0));

View File

@ -43,10 +43,9 @@
<el-container> <el-container>
<el-header class="top"> <el-header class="top">
<!-- 图片上传 --> <!-- 图片上传 -->
<el-upload action="https://cors-anywhere.herokuapp.com/https://sm.ms/api/v2/upload" <el-upload action="https://imgkr.com/api/files/upload"
headers="{'Content-Type': 'multipart/form-data'}" :show-file-list="false" :multiple="false" headers="{'Content-Type': 'multipart/form-data'}" :show-file-list="false" :multiple="true"
accept=".jpg,.jpeg,.png,.gif" :limit="1" name="smfile" :on-success="uploaded" :on-error="failed" accept=".jpg,.jpeg,.png,.gif" :limit="5" name="file" :on-success="uploaded" :on-error="failed">
:on-progress="uploading">
<el-tooltip class="item" effect="dark" content="点击上传图片" placement="bottom-start"> <el-tooltip class="item" effect="dark" content="点击上传图片" placement="bottom-start">
<i class="el-icon-upload" size="medium">&nbsp;</i> <i class="el-icon-upload" size="medium">&nbsp;</i>
</el-tooltip> </el-tooltip>