js实现上传图片到七牛
上传图片到七牛云的基本流程
注册七牛云账号并创建存储空间（Bucket），获取AccessKey和SecretKey。确保存储空间配置了正确的域名（CNAME）和访问权限。
安装七牛云的JavaScript SDK，可以通过npm安装或直接引入CDN链接。使用npm安装的命令如下：
npm install qiniu-js前端代码实现
在HTML中添加上传文件的输入框和按钮：
<input type="file" id="fileInput" accept="image/*">
<button id="uploadBtn">上传图片</button>引入七牛云SDK并初始化上传逻辑：
// 引入SDK（根据实际环境选择模块化或script标签方式）
import * as qiniu from 'qiniu-js';
document.getElementById('uploadBtn').addEventListener('click', () => {
const file = document.getElementById('fileInput').files[0];
if (!file) return alert('请选择图片');
// 从服务端获取token（实际项目中需替换为你的后端接口）
fetch('/api/qiniu-token').then(res => res.json()).then(data => {
const token = data.token;
const key = `images/${Date.now()}_${file.name}`; // 生成唯一文件名
const observable = qiniu.upload(file, key, token, {
region: qiniu.region.z0 // 根据存储空间区域选择
}, {
fname: file.name,
mimeType: file.type
});
observable.subscribe({
next: (res) => console.log('上传进度:', res),
error: (err) => console.error('上传失败:', err),
complete: (res) => {
console.log('上传完成', res);
const imageUrl = `http://your-bucket-domain/${res.key}`; // 替换为你的域名
alert(`图片地址: ${imageUrl}`);
}
});
});
});后端生成上传凭证
Node.js示例（需安装qiniu包）：
const qiniu = require('qiniu');
router.get('/api/qiniu-token', (req, res) => {
const accessKey = '你的ACCESS_KEY';
const secretKey = '你的SECRET_KEY';
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
const options = {
scope: '你的bucket名称',
expires: 3600 // 凭证有效期
};
const putPolicy = new qiniu.rs.PutPolicy(options);
const token = putPolicy.uploadToken(mac);
res.json({ token });
});注意事项
确保跨域配置正确，在七牛云控制台设置CORS规则允许前端域名访问。生产环境务必通过后端获取上传凭证，避免暴露AccessKey和SecretKey。
对于大文件上传，可以考虑使用分片上传功能：
const observable = qiniu.upload(file, key, token, {
region: qiniu.region.z0,
chunkSize: 4 * 1024 * 1024 // 分片大小4MB
});
