uni-app 图片粘贴本地目录生成规则可定义

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

uni-app 图片粘贴本地目录生成规则可定义

您好，

想用HbuildX来代替目前使用的Typora工具，目前对于粘贴图片时有一需求，希望粘贴的图片存放目录，可以自定义，比如可以自定义为当前md文件所在目录下的.images目录，这样可以最大限度的将图片利用和管理起来，谢谢！

开发环境 版本号 项目创建方式
HbuildX 未知 未知
Harmonyos Next教程
1 回复

在uni-app中，实现图片粘贴到本地目录，并允许自定义生成规则，通常需要结合一些前端和后端的处理。由于uni-app主要面向跨平台开发，这里我们假设你主要关注的是在H5或者小程序环境下进行实现。下面是一个简要的实现思路和代码示例。

前端部分（uni-app）

  1. 监听粘贴事件： 使用JavaScript监听粘贴事件，并解析粘贴板中的图片数据。
// 在页面的onMounted或onLoad生命周期中监听粘贴事件
document.addEventListener('paste', handlePaste);

function handlePaste(event) {
  const items = (event.clipboardData || window.clipboardData).items;
  for (let i = 0; i < items.length; i++) {
    if (items[i].type.indexOf('image') !== -1) {
      const blob = items[i].getAsFile();
      const reader = new FileReader();
      
      reader.onload = function(e) {
        const base64 = e.target.result.split(',')[1];
        // 调用后端接口上传图片，并传递自定义生成规则
        uploadImage(base64, 'custom_rule_here');
      };
      
      reader.readAsDataURL(blob);
    }
  }
}

function uploadImage(base64, rule) {
  uni.uploadFile({
    url: 'https://your-server.com/upload', // 后端接口地址
    filePath: '', // 此处为空，因为我们使用base64上传
    name: 'file',
    formData: {
      base64: base64,
      rule: rule
    },
    success: (uploadFileRes) => {
      console.log('上传成功：', uploadFileRes.data);
    },
    fail: (err) => {
      console.error('上传失败：', err);
    }
  });
}

后端部分（示例使用Node.js + Express）

  1. 接收图片并保存： 后端接收base64图片数据，根据自定义规则生成文件名，并保存到服务器指定目录。
const express = require('express');
const multer = require('multer');
const fs = require('fs');
const path = require('path');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  const base64 = req.body.base64;
  const rule = req.body.rule;
  const filename = generateFilename(rule); // 自定义生成规则函数
  
  fs.writeFile(path.join(__dirname, 'uploads', filename), base64.replace(/^data:image\/\w+;base64,/, ""), 'base64', (err) => {
    if (err) {
      return res.status(500).send('图片保存失败');
    }
    res.send('图片保存成功');
  });
});

function generateFilename(rule) {
  // 根据自定义规则生成文件名
  const timestamp = Date.now();
  return `${rule}_${timestamp}.png`;
}

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

注意事项

  • 前后端接口地址需要根据实际情况调整。
  • base64图片数据较大时，注意性能和网络带宽。
  • 自定义规则函数generateFilename可以根据实际需求进行修改。
  • 示例代码未包含错误处理和安全性检查，生产环境需完善。
回到顶部