vue-ueditor-wrap集成秀米图片转存至腾讯云oss

Vue-Ueditor-Wrap是一个用于Vue.js环境下的UEditor组件封装，它可以帮助你在Vue应用中轻松集成富文本编辑器Ueditor。如果你想将秀米图片上传并存储到腾讯云的OSS（Object Storage Service），你需要按照以下步骤操作：

1. **安装依赖**：首先，在你的Vue项目中安装`vue-ueditor`和`qiniu-sdk`，分别用于UEditor和Qiniu（腾讯云对象存储服务的SDK）：

npm install vue-ueditor qiniu-js-sdk

2. **配置UEditor**：在Vue组件中引入并配置Ueditor，添加文件上传相关的插件，例如`imageManager`和自定义的上传处理器：

import UEditor from 'vue-ueditor'
import Qiniu from 'qiniu-js-sdk'

Vue.component('vue-ueditor', UEditor)

export default {
  components: {
    UEditor,
  },
  data() {
    return {
      ue: {},
    }
  },
  mounted() {
    this.ue = new UEditor({
      ... // 其他配置项
      toolbars: ['fullscreen', 'undo redo | forecolor backcolor fontname fontsize emoticons image | imageManager'], // 添加图片管理工具栏
      uploadImageAction: '/api/upload-to-qiniu', // 图片上传接口地址
      uploadImageShowBase64: true, // 是否显示base64预览
      serverUrl: Qiniu.conf.uploadToken(), // 使用Qiniu提供的uploadToken处理上传
    })
    // 初始化Qiniu SDK
    Qiniu.init(Qiniu.conf.ACCESS_KEY, Qiniu.conf.SECRET_KEY)
  },
}

3. **处理图片上传**：创建一个后端API（如'/api/upload-to-qiniu'），该API应接收用户上传的图片数据，并调用Qiniu SDK将图片上传到OSS。示例代码如下：

// 后端Node.js服务器示例 (Express)
const express = require('express');
const multer = require('multer');
const app = express();
const qiniu = require('qiniu');

app.post('/api/upload-to-qiniu', multer({ fileFilter: checkImageFile }), async (req, res) => {
  try {
    const file = req.file;
    const key = `${Date.now()}_${file.originalname}`;
    const token = await qiniu.uploadToken(bucketName, key);

    await qiniu.put(file.buffer, key, token);
    
    // 返回新的图片URL到前端
    res.json({ url: `http://${bucketName}.qiniucdn.com/${key}` });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'Upload failed' });
  }
});

async function checkImageFile(req, file) {
  if (!file.mimetype.startsWith('image')) {
    return false;
  }
  return true;
}

app.listen(3000, () => console.log('Server started on port 3000'));