超越局限！Node+Vue携手七牛云，开启图片上传新篇章

前端

2023-06-24 18:31:10

Node.js+Vue.js携手七牛云：图片上传的终极指南

探索技术栈融合的奥秘

在数字时代，图片上传已成为不可或缺的能力。借助云存储的强大功能，七牛云凭借其卓越的稳定性和高性价比，成为开发者的心仪之选。本文将深入探究如何将Node.js、Vue.js与七牛云无缝融合，打造图片上传的完美解决方案。

Node.js和Vue.js：强强联手

Node.js作为事件驱动的JavaScript运行环境，为后端服务提供异步、非阻塞的处理能力。Vue.js则以其轻量、灵活和组件化的特性，深受前端开发者的喜爱。当这两种技术栈强强联手，便能打造出高效、稳定且美观的图片上传系统。

实现图片上传的详细指南

1. 七牛云注册与初始化

注册七牛云账号并创建存储空间，获取AccessKey和SecretKey。

2. Node.js后端构建

使用Express框架搭建Node.js后端服务，并安装七牛云官方提供的七牛云SDK。

const express = require('express');
const multer = require('multer');
const qiniu = require('qiniu');

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

app.post('/upload', upload.single('file'), async (req, res) => {
  const file = req.file;
  const token = await getUploadToken();
  const formUploader = new qiniu.FormUploader(token);
  const data = await formUploader.putFile(file.path, file.originalname);
  res.json({ url: data.url });
});

3. 上传凭证的获取

async function getUploadToken() {
  const mac = new qiniu.auth.digest.Mac(AccessKey, SecretKey);
  const options = {
    scope: bucketName,
    expires: 3600
  };
  const putPolicy = new qiniu.rs.PutPolicy(options);
  return putPolicy.uploadToken(mac);
}

4. Vue.js前端开发

在Vue.js前端代码中，使用axios库与后端通信。

import axios from 'axios';

export default {
  methods: {
    uploadImage(file) {
      const formData = new FormData();
      formData.append('file', file);
      axios.post('/upload', formData)
        .then(res => {
          console.log(res.data.url);
        })
        .catch(err => {
          console.error(err);
        });
    }
  }
};