Typora+PicGo+Gitee+node.js实现图片上传功能

粉丝不过W

## Typora+PicGo+Gitee+node.js实现图片上传功能

首先准备Typora + PicGo + Gitee + node.js 四大法器

Typora: https://typora.io/

image-20200621202005190

PicGo: https://github.com/Molunerfinn/PicGo/releases

安装的位置要记好, 后面会用到

image-20200621201913453

Gitee: https://gitee.com/

image-20200621202258546

node.js: https://nodejs.org/zh-cn/

image-20200621202356239

进入PicGo, 在插件设置里搜索 gitee, 安装时, 就必须下载 node.js, 如果你已经下载node.js, 还提醒你下载node.js, 你就重启一下(重启解决一下问题, 哈哈哈哈哈), 安装我这个, 后面那个配置不一样, 虽然也可以配置成, 教程就不太一样了

image-20200621210823690

owner: 自己的用户名,

repo: 项目的名字

path: 可以不用填

token: 就是自己的私人令

message: 测试, 随便填, 必须填一下, 我没有填 就上传不了

关键的部分, 一定要仔细, 要不然, 你就上传不成功

image-20200621211012492

私人令:

image-20200621211125076

只要projects就可以了

image-20200621211345943

填写完后, 就可以测试一下, Shift + win + s 就可可以随意切屏, 完成就点击剪贴板图片上传了, 如果没有提示成功, 重启一下, 然后再上传, 还不成功, 那你就要检查你的配置是不是错误了

image-20200621211903278

成功后, 你就进入 点击文件 , 偏好设置

image-20200621211521720

这里就配置上传服务 和 picgo的位置 就是你安装的位置 和 插入图片时配置为 上传图片

image-20200621212308316

image-20200621212358586

这样就是成功, 如果没有成功, 就看下面的教程

image-20200621212443623

这里和上面的地址和端口一致

image-20200621212212095

image-20200621212224749

然后你切屏直接复制在typora就可以, 会自动上传成功, 恭喜你向成功更近了一步

如果还搞不定, 可以留言给我, 我会积极给你解决的, 哈哈哈哈

* @Author: cpu_code

* @Date: 2011-03-15 10:45:16

* @LastEditTime: 2020-06-21 21:29:44

* @Gitee: https://gitee.com/cpu_code

* @CSDN: https://blog.csdn.net/qq_44226094

  • 37
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
当涉及到在Vue项目中使用Element UI进行图片,并使用JSON Server和Node.js图片存放在指定位置时,你可以按照以下步骤进行操作: 1. 在Vue项目中安装Element UI和Axios依赖: ```bash npm install element-ui axios ``` 2. 创建一个Vue组件,用于处理图片。在该组件的模板中,使用`el-upload`组件来处理图片。示例代码如下: ```vue <template> <div> <el-upload class="upload-demo" action="/api/upload" :on-success="handleUploadSuccess" :before-upload="beforeUpload" :auto-upload="false" > <el-button slot="trigger" size="small" type="primary">选择图片</el-button> </el-upload> <el-button @click="upload">上图片</el-button> </div> </template> <script> import axios from 'axios'; export default { methods: { handleUploadSuccess(response) { // 上成功后的回调函数 console.log(response); }, beforeUpload(file) { // 上前的处理函数,可在此处进行文件类型、大小等验证 console.log(file); return true; }, upload() { // 手动触发上 this.$refs.upload.submit(); }, }, }; </script> ``` 在上述代码中,我们使用了`el-upload`组件来实现图片,并将上的请求发送到`/api/upload`接口。你可以根据实际情况进行样式和其他参数的配置。 3. 在Vue项目的主入口文件中,引入Element UI和axios,并将其配置为Vue的全局组件和原型方法: ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; import axios from 'axios'; Vue.use(ElementUI); Vue.prototype.$http = axios; new Vue({ render: (h) => h(App), }).$mount('#app'); ``` 4. 在Node.js服务器中,使用`express`和`multer`来处理文件上。示例代码如下: ```javascript const express = require('express'); const multer = require('multer'); const app = express(); const upload = multer({ dest: 'uploads/' }); app.post('/api/upload', upload.single('file'), (req, res) => { // 处理文件上逻辑 console.log(req.file); res.json({ success: true }); }); app.listen(3000, () => { console.log('Server is running on http://localhost:3000'); }); ``` 在上述代码中,我们使用了`multer`中间件来处理文件上,并将上的文件存储在`uploads/`目录下。你可以根据需要更改存储位置和其他配置。 5. 在服务器端的命令行中,进入你的项目文件夹,并运行以下命令来安装所需的依赖: ```bash npm install express multer ``` 6. 在服务器端的命令行中,进入你的项目文件夹,并运行以下命令来启动Node.js服务器: ```bash node server.js ``` 确保服务器和Vue项目都在运行状态后,你就可以在Vue项目中进行图片了。选择图片后,点击"上图片"按钮即可手动触发上。上成功后,服务器端会将图片存储在指定的位置,并返回成功的响应。 请注意,上述示例中的代码只是为了演示概念,并不包含完整的错误处理和安全性措施。在实际项目中,你需要根据需求进行适当的优化和改进。 希望以上步骤能帮助你在Vue项目中实现图片并存放在指定位置!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

极客程序设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值