前端图片裁剪并上传到七牛云kodo

最近项目中用到七牛云图片上传，特别记录。

我的七牛云kodo存储区域是“华南”，demo示例均为华南，为了跑demo避免问题，建议使用华南区。

一 .服务端代码（java）

(1)导入maven

<dependency>
			<groupId>com.qiniu</groupId>
			<artifactId>qiniu-java-sdk</artifactId>
			<version>7.2.29</version>
		</dependency>
        <dependency>
            <groupId>com.squareup.okhttp3</groupId>
            <artifactId>okhttp</artifactId>
            <version>3.3.1</version>
            <scope>compile</scope>
        </dependency>

(2)获取签名代码

package com.durian.amanager.controllers.upload;

import java.util.UUID;

import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.durian.common.tool.ConfigUtils;
import com.qiniu.util.Auth;
import com.qiniu.util.StringMap;

@Controller
@Scope("prototype")
@RequestMapping("/qiniu")
public class QiniuUploadController {

	/*
	 * 简单方式解决中文乱码问题,通常不采用
	 */
//	@RequestMapping(value = "/login2",produces = "application/json;charset=utf-8";)
	@RequestMapping(value = "/imageUptoken")
	@ResponseBody
	public QiNiu imageUptoken() {
		String bucket = ConfigUtils.getString("qiniu.image.bucket", "", "qiniu");
		return getUptoken(bucket);
	}

	@RequestMapping(value = "/attachmentUptoken")
	@ResponseBody
	public QiNiu attachmentUptoken() {
		String bucket = ConfigUtils.getString("qiniu.attachment.bucket", "", "qiniu");
		return getUptoken(bucket);
	}

	private QiNiu getUptoken(String bucket) {
		QiNiu qiNiu = new QiNiu();
		String accessKey = ConfigUtils.getString("qiniu.accessKey", "", "qiniu");
		String secretKey = ConfigUtils.getString("qiniu.secretKey", "", "qiniu");

		long expireSeconds = ConfigUtils.getString("qiniu.expireSeconds", 600L, "qiniu"); // 过期时间
		StringMap putPolicy = new StringMap();
		Auth auth = Auth.create(accessKey, secretKey);
		String upToken = auth.uploadToken(bucket, null, expireSeconds, putPolicy);
		qiNiu.setKey(UUID.randomUUID().toString().replaceAll("\\-", ""));
		qiNiu.setUptoken(upToken);

		return qiNiu;
	}
}

class QiNiu {
	private String uptoken;
	private String key;

	public String getUptoken() {
		return uptoken;
	}

	public void setUptoken(String uptoken) {
		this.uptoken = uptoken;
	}

	public String getKey() {
		return key;
	}

	public void setKey(String key) {
		this.key = key;
	}
}

package com.durian.common.tool;

import java.util.ResourceBundle;

import org.apache.commons.lang3.StringUtils;

/**
 * 从指定文件取值
 * 
 * @author leng
 *
 */
public class ConfigUtils {

	/**
	 * 从指定文件取值
	 * 
	 * @param key
	 * @param defaultValue
	 * @param configName
	 * @return
	 */
	public static String getString(String key, String defaultValue, String configName) {
		try {
			ResourceBundle rb2 = ResourceBundle.getBundle(configName);
			String str = rb2.getString(key).trim();
			if (StringUtils.isNotEmpty(str)) {
				return str;
			}
		} catch (Exception e) {
			// TODO: handle exception
		}
		return defaultValue;
	}

	/**
	 * 从指定文件取值
	 * 
	 * @param key
	 * @param defaultValue
	 * @param configName
	 * @return
	 */
	public static Long getString(String key, Long defaultValue, String configName) {
		String str = getString(key, "", configName);
		if (StringUtils.isEmpty(str)) {
			return defaultValue;
		}
		return Long.parseLong(str);
	}
}

 

二.前端代码核心

(1)通过h5的canvas能力生成base64的图片编码

（2）获取签名

(3)将base64编码上传到七牛云（图中圈出的链接和七牛的服务器地域有关系）

这里window.opener.uploadCallback是我的页面回调。

 

前端代码:

链接：https://pan.baidu.com/s/1G6oPNwd8v2dpIcBN0QYtpg 
提取码：mvug 
复制这段内容后打开百度网盘手机App，操作更方便哦。