uni-app 插件需求 粘贴自动上传图床加图床替换

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app 插件需求 粘贴自动上传图床加图床替换

粘贴自动上传图床

可添加阿里云oss、腾讯云等作为图床存储的空间，在编辑时，粘贴图片直接上传到图床，并在编辑框内替换为上传后的链接

图床替换

从A图床替换为B图床的链接，某些网站是限制了防盗链的，复制MD代码到本地，图片是可以正常预览的，一旦发布到其他地方，就会因为防盗链问题不能显示图片，所以最好是能有个图床替换的功能，进行图片链接的装换。

Harmonyos Next教程
10 回复

有大佬做这个插件嘛


HBuilderX，markdown有个一键分享功能，可以上传图片到uniCloud。见：https://ask.dcloud.net.cn/article/37573

哈哈 主要是想存储到自己的oss里

试下这个插件: https://ext.dcloud.net.cn/plugin?id=2154
支持上传图片到阿里云oss、腾讯云cos、七牛云

我测试了 1.能否加上批量转换的功能，把图片从A域名转移到B域名的图床下。 2.能否设置默认项，比如我只用阿里云的，那么我把阿里云的设置为默认上传的。 3.能否加上粘贴上传，在编辑的时候，粘贴图片或者文件，直接上传（配置能能设置开启还是关闭）

我现在经常用语雀写文档，但是语雀开启了防盗链了，如果我写好的文档搬到我们自己网站的话，上边的图片链接是语雀的，就不能正常显示，所以要转换成我们自己oss里的链接（批量转换）。 我现在是用小书匠进行转换，不过最近准备换到HX，要是有这个功能就完美了。

回复 阿磐: 感谢反馈，下期优化。

菜单【设置】【插件配置】，可以设置只显示特定厂商。

能否加一个GitHub或者调用picgo

针对您提出的uni-app插件需求——粘贴自动上传图床及图床替换功能，以下是一个简化的代码案例展示如何实现这一功能。此示例假定您已经熟悉uni-app的开发流程，并且有一个可用的图床API接口。

1. 引入必要的依赖

首先，确保在manifest.json中配置了必要的权限，比如剪贴板访问权限。

2. 监听粘贴事件

在页面的onLoad或mounted生命周期中，添加对粘贴事件的监听。

export default {
  mounted() {
    window.addEventListener('paste', this.handlePaste);
  },
  beforeDestroy() {
    window.removeEventListener('paste', this.handlePaste);
  },
  methods: {
    async handlePaste(event) {
      const clipboardData = event.clipboardData || window.clipboardData;
      const items = clipboardData.items;
      for (let item of items) {
        if (item.type.indexOf('image') !== -1) {
          const blob = item.getAsFile();
          const fileReader = new FileReader();
          fileReader.onload = async (e) => {
            const base64Image = e.target.result.split(',')[1];
            // 调用图床上传函数
            const imageUrl = await this.uploadToImageHost(base64Image);
            // 替换文本中的图床链接（假设在某个textarea中）
            const textarea = this.$refs.textarea;
            textarea.value = textarea.value.replace(/\[img\].*?\[\/img\]/g, `[img]${imageUrl}[/img]`);
          };
          fileReader.readAsDataURL(blob);
        }
      }
    },
    async uploadToImageHost(base64Image) {
      try {
        const response = await fetch('YOUR_IMAGE_HOST_API_URL', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({ image: base64Image }),
        });
        const data = await response.json();
        return data.url; // 假设图床API返回的数据中包含url字段
      } catch (error) {
        console.error('图床上传失败:', error);
        throw error;
      }
    },
  },
};

3. HTML部分

在模板中添加一个textarea用于测试粘贴功能。

<template>
  <view>
    <textarea ref="textarea" placeholder="粘贴图片到这里"></textarea>
  </view>
</template>

注意事项

  • 确保图床API的URL正确，并根据API的实际返回结构调整代码。
  • 此示例中，图片链接的替换逻辑较为简单，假设用户输入的格式为[img]URL[/img]，您可能需要根据实际需求调整。
  • 处理错误和异常情况，如上传失败、网络问题等。
  • 根据项目需求，可能需要进一步优化用户体验，比如上传进度显示、上传成功/失败提示等。

以上代码提供了一个基本的实现框架，您可以根据具体需求进行扩展和优化。

回到顶部