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

1. 七牛云平台部分

选择对象存储，新建一个存储空间，里面包含你的文件外链

后续所需要的参数可在以上内容查看。

2. 后端部分

npm install qiniu
npm install multer

router/qn.js

const express = require("express");
// 创建路由对象
const router = express.Router();

// 导入用户路由处理函数模块
const qnHandler = require("../router_handler/qn");

// 获取七牛云token
router.get("/getQnToken", qnHandler.getQnToken);

// 将路由对象共享出去
module.exports = router;

router_handler/qn.js

/*
七牛云配置
*/
const qiniu = require("qiniu");

// 登录的处理函数
exports.getQnToken = (req, res) => {
  // 创建上传凭证
  const accessKey = "xxx";//个人中心中有
  const secretKey = "xxx";//个人中心中有
  const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
  const options = {
    scope: "xxx",//空间名称
    expires: 7200, //过期时间（s） 2h
  };
  const putPolicy = new qiniu.rs.PutPolicy(options);
  const uploadToken = putPolicy.uploadToken(mac);

  res.send({
    status: 0,
    msg: "获取七牛云token成功",
    data: uploadToken, //将token返回给前端
  });
};

3. 前端部分

<el-upload
	class="avatar-uploader"
	action="https://jsonplaceholder.typicode.com/posts/"
	:show-file-list="false"
	:on-success="handleAvatarSuccess"
	:before-upload="beforeAvatarUpload"
>
	<img v-if="imageUrl" :src="imageUrl" class="avatar" />
	<i v-else class="el-icon-upload avatar-uploader-icon"></i>
</el-upload>

utils/qn.config

/*
  七牛云相关配置 
*/

// 七牛云的上传地址，根据自己所在地区选择，我是华南区
const domain = "https://upload-z2.qiniup.com";
// 这是七牛云空间的外链默认域名
const qiniuAddr = "xxx";

export { domain, qiniuAddr };

<script>
import { domain, qiniuAddr } from "@/utils/qn.config";
</script>

metheod: {
async registerNow(){
	  //1.先从后端获取七牛云token
      let token = "";
      //调用后端接口
      const res = await requestHttp({
        api: api.QNTOKEN_GET_API,
        method: "GET",
      });
      if (res.status != 0) {
        this.$message.error(res.msg || "获取七牛云token失败");
      }
      if (res.status == 0) {
        token = res.data; //获取到七牛云token
      }
      const config = {
        headers: { "Content-Type": "multipart/form-data" }, //上传文件所需headers格式
      };
      let filetype = "";
      if (this.file.type === "image/png") {
        filetype = "png";
      } else {
        filetype = "jpg";
      }
      // 重命名要上传的文件
      const name =
        "avatar/" + moment(new Date()).format("YYYYMMDDHHMMSS") + filetype; // avatar/ 为自定义文件夹路径
      // 上传到七牛云
      const formData = new FormData();
      formData.append("file", this.file);
      formData.append("token", token);
      formData.append("key", name);
      //2.将图片上传到七牛云
      const res2 = await requestHttp(
        {
          api: domain,
          method: "POST",
          params: formData,
        },
        config
      );
      // console.log(res2.key); //图片路径
      // console.log("http://" + qiniuAddr + "/" + res2.key);// 图片地址
}
handleAvatarSuccess(res, file) {
      this.file = file.raw;
      // console.log(file);
      // console.log(file.raw);
      this.imageUrl = URL.createObjectURL(file.raw);
      // console.log(this.imageUrl);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
}