七牛云图片上传

本文介绍了如何在项目中利用七牛云进行图片上传,包括七牛云平台的注册与存储空间创建,以及在前后端代码中实现上传图片并返回图片URL的详细步骤。
摘要由CSDN通过智能技术生成

七牛云上传图片并返回图片Url

在开发项目的时候,经常会用到上传图片的功能,如果把图片全都存放在项目路径下,会导致项目越来越臃肿,因此可以考虑把图片上传交给第三方处理,此处我们采用七牛云进行图片存储。

一.七牛云准备工作

1.七牛云注册登录
七牛云官网 传送门
在这里插入图片描述
2.新建存储空间
在这里插入图片描述
进入对象存储菜单,点击“新建存储空间”,这里需要实名认证,上传身份证正反面之类的,大概一个小时左右就认证成功了

在这里插入图片描述
这里的存储空间名称要记住,之后在代码里面会用到。

二.代码实现

1.在pom.xml添加七牛云依赖

我的项目使用了maven管理jar包,所以只需直接添加相应依赖即可:

<dependency>
    <groupId>com.qiniu</groupId>
    <artifactId>qiniu-java-sdk</artifactId>
    <version>7.1.1</version>
</dependency>

2.添加七牛云图片操作工具类

package com.cn.netdisk.util;

import java.io.IOException;
import java.util.HashSet;
import java.util.Set;
import java.util.regex.Matcher;
import java.util.regex.Pattern;

import com.qiniu.common.QiniuException;
import com.qiniu.http.Response;
import com.qiniu.storage.BucketManager;
import com.qiniu.storage.UploadManager;
import com.qiniu.util.Auth;
import com.qiniu.util.Base64;
import com.qiniu.util.StringMap;
import com.qiniu.util.UrlSafeBase64;

import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.RequestBody;

public class QiniuCloudUtil {
   

    // 设置需要操作的账号的AK和SK
    private static final String ACCESS_KEY = "你的ACCESS_KEY";
    private static final String SECRET_KEY = "你的SECRET_KEY";

    // 要上传的空间
    private static final String bucketname = "你的空间名称";

    // 密钥
    private static final Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);

    private static final String DOMAIN = "你的图片上传路径";

    private static final
Next.js 结合七牛云进行图片上传通常涉及以下几个步骤: 1. **注册并配置七牛云账号**:首先需要在七牛云官网创建一个账号,并创建一个存储空间用于存放图片。 2. **安装依赖**:安装`qiniu` SDK,这是一套Node.js客户端库,用于操作七牛云对象存储服务。可以使用npm命令安装:`npm install qiniu`. 3. **获取Access Key和Secret Key**:这是七牛云提供的身份凭据,用于安全地访问您的存储资源。 4. **设置七牛云配置**:在Next.js项目的`config`文件或环境变量中配置七牛云的相关信息,如Bucket名称、Access Key和Secret Key。 5. **图片上传函数**:创建一个函数,例如`uploadImageToQiniu`, 使用`qiniu`库上传图片到指定的空间。示例代码可能如下: ```javascript import Qiniu from 'qiniu'; async function uploadImageToQiniu(file) { const config = new Qiniu.Configuration({ accessKey: '<your_access_key>', secretKey: '<your_secret_key>', }); const bucketName = '<your_bucket_name>'; const q = new Qiniu.Auth(config); const key = `<unique_filename>.jpg`; // 自定义图片名 try { const result = await q.put(key, file); return result.key; // 返回上传后的图片URL } catch (err) { console.error('Upload failed:', err); } } ``` 6. **在组件中调用**:在需要上传图片的地方,比如表单提交处理,你可以通过`useEffect`或自定义hook来调用这个上传函数,并将返回的图片URL展示或保存。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值