前言
作为前端开发人员，经常会涉及到图片上传和删除的操作。本文将介绍如何使用 Hapi.js 框架实现七牛上传图片与删除图片的操作。七牛云存储是一个安全、稳定、高效的云存储平台，它提供了完整的 API 接口，方便开发人员进行文件的管理和操作。
准备工作
在开始实现七牛上传图片与删除图片之前，我们需要准备以下工作：
- 注册七牛云存储账号并创建一个存储空间，并获取 AccessKey 和 SecretKey。
- 安装 Hapi.js 框架。
- 安装七牛 Node.js SDK。
实现七牛上传图片
创建 Hapi.js 服务
首先，我们需要创建一个 Hapi.js 服务。在创建服务之前，需要先安装 Hapi.js 框架：
npm install hapi
然后，创建一个 index.js 文件，并编写以下代码：
// javascriptcn.com 代码示例
const Hapi = require('hapi');
const server = Hapi.server({ port: 3000 });
server.route({
method: 'GET',
path: '/',
handler: (request, h) => {
return 'Hello, world!';
}
});
async function start() {
await server.start();
console.log(`Server running at: ${server.info.uri}`);
}
start();以上代码创建了一个 Hapi.js 服务，并添加了一个路由，当访问根路径时，返回 "Hello, world!"。
配置七牛云存储
在开始上传图片之前，我们需要配置七牛云存储。在 index.js 文件中添加以下代码：
// javascriptcn.com 代码示例
const qiniu = require('qiniu');
const accessKey = 'your accessKey';
const secretKey = 'your secretKey';
const bucket = 'your bucket';
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
const options = {
scope: bucket,
};
const putPolicy = new qiniu.rs.PutPolicy(options);
const uploadToken = putPolicy.uploadToken(mac);
const config = new qiniu.conf.Config();
config.zone = qiniu.zone.Zone_z0;
const formUploader = new qiniu.form_up.FormUploader(config);
const putExtra = new qiniu.form_up.PutExtra();
server.decorate('request', 'qiniu', { value: qiniu });
server.decorate('request', 'accessKey', { value: accessKey });
server.decorate('request', 'secretKey', { value: secretKey });
server.decorate('request', 'bucket', { value: bucket });
server.decorate('request', 'mac', { value: mac });
server.decorate('request', 'uploadToken', { value: uploadToken });
server.decorate('request', 'formUploader', { value: formUploader });
server.decorate('request', 'putExtra', { value: putExtra });以上代码配置了七牛云存储，并使用 Hapi.js 的装饰器模式将相关对象添加到 request 对象中，方便后续操作。
实现上传图片的路由
现在，我们可以实现上传图片的路由。在 index.js 文件中添加以下代码：
// javascriptcn.com 代码示例
server.route({
method: 'POST',
path: '/upload',
options: {
payload: {
output: 'stream',
parse: true,
allow: 'multipart/form-data',
},
},
handler: async (request, h) => {
const { qiniu, accessKey, secretKey, bucket, mac, uploadToken, formUploader, putExtra } = request;
const data = request.payload;
const file = data.file;
const fileName = file.hapi.filename;
const readStream = file._data;
const key = fileName;
const uploadPromise = () => {
return new Promise((resolve, reject) => {
formUploader.putStream(uploadToken, key, readStream, putExtra, (err, body, info) => {
if (err) {
reject(err);
} else {
resolve(body);
}
});
});
};
try {
const result = await uploadPromise();
return result;
} catch (error) {
return error;
}
},
});以上代码实现了一个 POST 请求的路由，接收一个名为 file 的文件参数，并将文件上传到七牛云存储中。
实现七牛删除图片
实现删除图片的路由
现在，我们可以实现删除图片的路由。在 index.js 文件中添加以下代码：
// javascriptcn.com 代码示例
server.route({
method: 'DELETE',
path: '/delete',
handler: async (request, h) => {
const { qiniu, accessKey, secretKey, bucket, mac } = request;
const key = 'your key';
const config = new qiniu.conf.Config();
const bucketManager = new qiniu.rs.BucketManager(mac, config);
const deletePromise = () => {
return new Promise((resolve, reject) => {
bucketManager.delete(bucket, key, (err, respBody, respInfo) => {
if (err) {
reject(err);
} else {
resolve(respBody);
}
});
});
};
try {
const result = await deletePromise();
return result;
} catch (error) {
return error;
}
},
});以上代码实现了一个 DELETE 请求的路由，删除指定 key 的图片。
示例代码
完整的示例代码可以在以下链接中找到：
https://github.com/hellohjc/hapi-qiniu-example
总结
本文介绍了如何使用 Hapi.js 框架实现七牛上传图片与删除图片的操作。通过本文的学习，读者可以了解到如何使用 Hapi.js 框架和七牛 Node.js SDK，以及如何使用 Hapi.js 的装饰器模式将相关对象添加到 request 对象中，方便后续操作。本文的示例代码可以帮助读者更好地理解本文的内容。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655b588fd2f5e1655d57fa83