七牛云照片上传

七牛云存储

七牛云(隶属于上海七牛信息技术有限公司)是国内领先的以视觉智能和数据智能为核心的企业级云计算服务商,同时也是国内知名智能视频云服务商,累计为 70 多万家企业提供服务,覆盖了国内80%网民。围绕富媒体场景推出了对象存储、融合 CDN 加速、容器云、大数据平台、深度学习平台等产品、并提供一站式智能视频云解决方案。为各行业及应用提供可持续发展的智能视频云生态,帮助企业快速上云,创造更广阔的商业价值。

官网:https://www.qiniu.com/

这篇文章主要使用的是七牛云提供的对象存储服务来存储图片。

前提:

在七牛云官网注册账号,新建存储空间,会给你域名、 AccessKey/SecretKey,后面上传会用到。

使用技术:

后端:ssm+Dubbo
前端:vue和element-ui

第一步:使用Java SDK操作七牛云需要导入如下maven坐标

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

第二步:封装工具类

package com.gzy.health.utils;

import com.qiniu.common.QiniuException;
import com.qiniu.common.Zone;
import com.qiniu.http.Response;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.qiniu.util.Auth;

import java.io.FileInputStream;
import java.util.UUID;

/**
 * 七牛云工具类
 */
public class QiniuUtils {
    public  static String qiniu_img_url_pre = "http://puu5tu0hl.bkt.clouddn.com/";
    public  static String accessKey = "wz3fgxFmBhU-Ao7-kAXCPNmojAl9BkN2c5HgUun";
    public  static String secretKey = "74ARWFtV6fzDPWAS4TDI0UPASNYFvCD5rXMPTMa";
    public  static String bucket = "gzy_health";

    /**
     * 上传文件
     * @param bytes 文件内容,字节数组
     * @param uploadFileName 保存到服务端的文件名
     */
    public static void upload2Qiniu(byte[] bytes, String uploadFileName){
        //构造一个带指定Zone对象的配置类,Zone.zone0()代表华东地区
        Configuration cfg = new Configuration(Zone.zone0());
        //...其他参数参考类注释
        UploadManager uploadManager = new UploadManager(cfg);

        //默认不指定key的情况下,以文件内容的hash值作为文件名
        String key = uploadFileName;
        Auth auth = Auth.create(accessKey, secretKey);
        String upToken = auth.uploadToken(bucket);
        try {
            Response response = uploadManager.put(bytes, key, upToken);
            //解析上传成功的结果
            System.out.println(response.bodyString());
            // 访问路径
            System.out.println(qiniu_img_url_pre+uploadFileName);
        } catch (QiniuException ex) {
            Response r = ex.response;
            System.err.println(r.toString());
            try {
                System.err.println(r.bodyString());
            } catch (QiniuException ex2) {
                //ignore
                ex.printStackTrace();
            }
        }
    }
    // 测试上传
    public static void main(String args[]) throws Exception{
        // 测试上传
        String localFilePath = "D:\\TempG\\test.jpg";
        FileInputStream fileInputStream = new FileInputStream(localFilePath);
        byte[] data = new byte[1024*1024];
        fileInputStream.read(data);
        String saveFileName = UUID.randomUUID().toString().replace("-","");
        QiniuUtils.upload2Qiniu(data,saveFileName);
    }
}

第三步:导入图片上传依赖

<!--u图片上传工具-->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
        </dependency>

第四步:配置spring文件

<!--文件 上传 组件-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--最大上传100M-->
        <property name="maxUploadSize" value="104857600"/>
        <!--读取文件到内存中最大的字节数,io流每次读写-->
        <property name="maxInMemorySize" value="4096"/>
        <property name="defaultEncoding" value="UTF-8"/>
    </bean>

第五步:提供上传控制器

代码后面redis存储照片名称,是为定时删除,可忽略。

public class SetMealController {
    @Autowired
    private JedisPool jedisPool;
    @Reference
   private SetMealService setMealService;
    @RequestMapping("/upload")
    public Result upload(@RequestParam(name="imgFile") MultipartFile imgFile){
        try {
        //获取原文件名
        String filename = imgFile.getOriginalFilename();
        //使用UUId自定义文件名
        String savefilename=UUID.randomUUID().toString().replace("-","")+"_"+filename;
        //利用工具包上传七牛云
        QiniuUtils.upload2Qiniu(imgFile.getBytes(),savefilename);
        //文件上传后的路径,传回前端进行显示
        String filepath=QiniuUtils.qiniu_img_url_pre+savefilename;
         //保存图片名到redis用于后面的定时的删除
            jedisPool.getResource().sadd(RedisConst.SETMEAL_PIC_RESOURCES,savefilename);
         return new Result(true,MessageConst.PIC_UPLOAD_SUCCESS,filepath);
        }
        catch (IOException e) {
            e.printStackTrace();
            return new Result(false,MessageConst.PIC_UPLOAD_FAIL);
        }
    }
}
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展示或保存。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值