程序员的图片管理的独门秘诀：将base64编码图片上传到七牛云的攻略

2024-01-27 16:45:42

最近因为业务需要，要实现一个将base64编码图片上传到七牛的功能，由于不是通过input的file选择框来还选择图片上传，所以没法使用element-ui提供的方便又好用的el-upload组件了。以前也没做过呀，这可咋整呢？所谓万事不决问百度嘛，于是百度之，没想到很快找到了答案，下面就来分享一下吧！

前端篇：获取base64编码图片

在前端，我们要想办法获取base64编码的图片。这里有几种常用的方法：

1. 通过HTML5的FileReader API

const fileInput = document.querySelector('input[type=file]');

fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = (e) => {
    const base64 = e.target.result;
    // 这里可以将base64编码的图片发送到后端
  };

  reader.readAsDataURL(file);
});

2. 通过第三方库，如jQuery的fileReader插件

$('input[type=file]').fileReader({
  onProgress: function(data) {
    console.log(data.base64);
    // 这里可以将base64编码的图片发送到后端
  }
});

3. 通过canvas元素

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

const image = new Image();
image.onload = () => {
  canvas.width = image.width;
  canvas.height = image.height;
  ctx.drawImage(image, 0, 0);

  const base64 = canvas.toDataURL();
  // 这里可以将base64编码的图片发送到后端
};

image.src = 'path/to/image.png';

后端篇：上传图片到七牛云

在后端，我们需要使用七牛云提供的SDK来上传图片。这里以Node.js为例：

const qiniu = require('qiniu');

const accessKey = 'YOUR_ACCESS_KEY';
const secretKey = 'YOUR_SECRET_KEY';
const bucket = 'YOUR_BUCKET_NAME';

const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
const config = new qiniu.conf.Config();
const client = new qiniu.rs.Client(config);

const uploadToken = client.uploadToken(bucket);

client.uploadFile(uploadToken, 'path/to/local/file', 'remote/file/name', (err, res, info) => {
  if (err) {
    console.log(err);
  } else {
    console.log(res);
  }
});