Node.js+element-ui 上传图片到七牛云（详细步骤附代码）

首先，确保你已经安装了七牛云的 Node.js SDK，并且已经获取了七牛云的 ACCESS_KEY 和 SECRET_KEY。

1. 安装七牛云 Node.js SDK：

npm install qiniu --save

2. 使用七牛云 SDK 上传图片到七牛云：

const qiniu = require('qiniu');
const fs = require('fs');
const path = require('path');
 
// 设置七牛云的 ACCESS_KEY 和 SECRET_KEY
qiniu.conf.ACCESS_KEY = '你的 ACCESS_KEY';
qiniu.conf.SECRET_KEY = '你的 SECRET_KEY';
 
// 设置你的 bucket 名称和你的七牛云存储空间的域名
const bucket = '你的 bucket 名称';
const bucketDomain = '你的 bucket 域名';
 
// 创建一个新的 mac
const mac = new qiniu.auth.digest.Mac(qiniu.conf.ACCESS_KEY, qiniu.conf.SECRET_KEY);
 
// 创建 config
const config = new qiniu.conf.Config();
// 设置空间名
config.zone = qiniu.zone.Zone_z0;
 
// 上传函数
function uploadFile(localFile, key) {
  const putPolicy = new qiniu.rs.PutPolicy({
    scope: bucket,
  });
  const uploadToken = putPolicy.uploadToken(mac);
  const formUploader = new qiniu.form_up.FormUploader(config);
  const putExtra = new qiniu.form_up.PutExtra();
 
  // 调用 SDK 上传文件
  formUploader.putFile(uploadToken, key, localFile, putExtra, function(respErr, respBody, respInfo) {
    if (respErr) {
      throw respErr;
    }
    if (respInfo.statusCode == 200) {
      console.log('文件上传成功');
      console.log(respBody);
    } else {
      console.log('文件上传失败');
    }
  });
}
 
// 使用 Element UI 的 Upload 组件的 before-upload 钩子函数上传图片
// 假设你已经有了一个 el-upload 组件，并且它的 ref 是 'upload'
const uploadInstance = this.$refs.upload;
uploadInstance.beforeUpload = function(file) {
  // 这里的 file.raw 是 input 元素选中的文件
  uploadFile(file.raw.path, file.name);
  return false; // 阻止默认上传行为
};

这段代码首先配置了七牛云的 ACCESS\_KEY 和 SECRET\_KEY，然后创建了一个上传函数 uploadFile，该函数接受本地文件路径和文件名作为参数。在 Element UI 的 Upload 组件中，你可以使用 before-upload 钩子函数来处理文件选择事件，在该函数中调用 uploadFile 函数上传图片。这里返回 false 来阻止默认的文件上传行为，因为我们已经通过七牛云 SDK 将文件上传到了七牛云。