图片上传的两种方式（前端和后端）

1：前端
HTML：

<html>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/qiniu.min.js"></script>
<script type="text/javascript">$(function () {$("#upload").on("click", function () {var obj = $("#file");var fileName = obj.val();                                                //上传的本地文件绝对路径var suffix = fileName.substring(fileName.lastIndexOf("."),fileName.length);//后缀名var file = obj.get(0).files[0];                                            //上传的文件var size = file.size > 1024 ? file.size / 1024 > 1024 ? file.size / (1024 * 1024) > 1024 ? (file.size / (1024 * 1024 * 1024)).toFixed(2) + 'GB' : (file.size/ (1024 * 1024)).toFixed(2) + 'MB' : (file.size/ 1024).toFixed(2) + 'KB' : (file.size).toFixed(2) + 'B';           //文件上传大小//七牛云上传$.ajax({type:'post',url: "/QiniuUpToken",data:{"suffix":suffix},dataType:'json',success: function(result){if(result.success == 1){var observer = {                         //设置上传过程的监听函数next(result){                        //上传中(result参数带有total字段的 object，包含loaded、total、percent三个属性)Math.floor(result.total.percent);//查看进度[loaded:已上传大小(字节);total:本次上传总大小;percent:当前上传进度(0-100)]},error(err){                          //失败后alert(err.message);},complete(res){                       //成功后// ?imageView2/2/h/100：展示缩略图，不加显示原图// ?vframe/jpg/offset/0/w/480/h/360：用于获取视频截图的后缀，0：秒，w：宽，h：高$("#image").attr("src",result.domain+result.imgUrl+"?imageView2/2/w/400/h/400/q/100");}};var putExtra = {fname: "",                          //原文件名params: {},                         //用来放置自定义变量mimeType: null                      //限制上传文件类型};var config = {region:qiniu.region.z2,             //存储区域(z0:代表华东;z2:代表华南,不写默认自动识别)concurrentRequestLimit:3            //分片上传的并发请求量};var observable = qiniu.upload(file,result.imgUrl,result.token,putExtra,config);var subscription = observable.subscribe(observer);          // 上传开始// 取消上传// subscription.unsubscribe();}else{alert(result.message);                  //获取凭证失败}},error:function(){                             //服务器响应失败处理函数alert("服务器繁忙");}});})})
</script>
<body><input type="file" name="image" id="file" accept="image/*"><input type="button" id="upload" value="upload"><img id="image" src="#" alt="">
</body>
</html>

controller（生成上传凭证）：

@Controller
public class QiniuUpload {// ******的内容需要查看七牛云账号的相关信息private static final String accessKey = "******";    //访问秘钥private static final String secretKey = "******";    //授权秘钥private static final String bucket = "******";       //存储空间名称private static final String domain = "******";       //外链域名/*** 七牛云上传生成凭证** @throws Exception*/@RequestMapping("/QiniuUpToken")@ResponseBodypublic Map<String, Object> QiniuUpToken(@RequestParam String suffix) throws Exception{Map<String, Object> result = new HashMap<String, Object>();try {//验证七牛云身份是否通过Auth auth = Auth.create(accessKey, secretKey);//生成凭证String upToken = auth.uploadToken(bucket);result.put("token", upToken);//存入外链默认域名，用于拼接完整的资源外链路径result.put("domain", domain);// 是否可以上传的图片格式/*boolean flag = false;String[] imgTypes = new String[]{"jpg","jpeg","bmp","gif","png"};for(String fileSuffix : imgTypes) {if(suffix.substring(suffix.lastIndexOf(".") + 1).equalsIgnoreCase(fileSuffix)) {flag = true;break;}}if(!flag) {throw new Exception("图片：" + suffix + " 上传格式不对！");}*///生成实际路径名String randomFileName = UUID.randomUUID().toString() + suffix;result.put("imgUrl", randomFileName);result.put("success", 1);} catch (Exception e) {result.put("message", "获取凭证失败，"+e.getMessage());result.put("success", 0);} finally {return result;}}
}

后端：
工具类：

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和SKprivate 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 String style = "自定义的图片样式";public static String getUpToken() {        return auth.uploadToken(bucketname, null, 3600, new StringMap().put("insertOnly", 1));}// 普通上传public static String upload(String filePath, String fileName) throws IOException {// 创建上传对象UploadManager uploadManager = new UploadManager();try {// 调用put方法上传String token = auth.uploadToken(bucketname);if(StringUtils.isEmpty(token)) {System.out.println("未获取到token，请重试！");return null;}Response res = uploadManager.put(filePath, fileName, token);// 打印返回的信息System.out.println(res.bodyString());if (res.isOK()) {Ret ret = res.jsonToObject(Ret.class);//如果不需要对图片进行样式处理，则使用以下方式即可//return DOMAIN + ret.key;return DOMAIN + ret.key + "?" + style;}} catch (QiniuException e) {Response r = e.response;// 请求失败时打印的异常的信息System.out.println(r.toString());try {// 响应的文本信息System.out.println(r.bodyString());} catch (QiniuException e1) {// ignore}}return null;}//base64方式上传public static String put64image(byte[] base64, String key) throws Exception{String file64 = Base64.encodeToString(base64, 0);Integer len = base64.length;//华北空间使用 upload-z1.qiniu.com，华南空间使用 upload-z2.qiniu.com，北美空间使用 upload-na0.qiniu.comString url = "http://upload.qiniu.com/putb64/" + len + "/key/"+ UrlSafeBase64.encodeToString(key);      RequestBody rb = RequestBody.create(null, file64);Request request = new Request.Builder().url(url).addHeader("Content-Type", "application/octet-stream").addHeader("Authorization", "UpToken " + getUpToken()).post(rb).build();//System.out.println(request.headers());OkHttpClient client = new OkHttpClient();okhttp3.Response response = client.newCall(request).execute();System.out.println(response);//如果不需要添加图片样式，使用以下方式//return DOMAIN + key;return DOMAIN + key + "?" + style;}// 普通删除(暂未使用以下方法，未测试)public static void delete(String key) throws IOException {// 实例化一个BucketManager对象BucketManager bucketManager = new BucketManager(auth);// 此处的33是去掉：http://ongsua0j7.bkt.clouddn.com/,剩下的key就是图片在七牛云的名称key = key.substring(33);try {// 调用delete方法移动文件bucketManager.delete(bucketname, key);} catch (QiniuException e) {// 捕获异常信息Response r = e.response;System.out.println(r.toString());}}class Ret {public long fsize;public String key;public String hash;public int width;public int height;}
}

controller：

@ResponseBody
@RequestMapping(value="/uploadImg", method=RequestMethod.POST)
public ResultInfo uploadImg(@RequestParam MultipartFile image, HttpServletRequest request) {ResultInfo result = new ResultInfo();if (image.isEmpty()) {result.setCode(400);result.setMsg("文件为空，请重新上传");return result;}try {byte[] bytes = image.getBytes();String imageName = UUID.randomUUID().toString();try {//使用base64方式上传到七牛云String url = QiniuCloudUtil.put64image(bytes, imageName);result.setCode(200);result.setMsg("文件上传成功");result.setInfo(url);} catch (Exception e) {e.printStackTrace();}} catch (IOException e) {result.setCode(500);result.setMsg("文件上传发生异常！");} finally {return result;}
}

图片上传的两种方式（前端和后端）相关推荐

Android图片上传的两种方式
图片上传,以及带参数的图片上传是Android开发中,很常见的需求.但也是接口联调难度相对比较大的技术实现,本文介绍两种可靠的图片上传方式.一是通过 MultipartBody 来实现:二是通过图片转 ...
原生态的ajax如何上传文件,原生ajax和iframe框架实现图片文件上传的两种方式
大家应该可以举出几种常用的异步文件上传功能的实现方式,使用频率较多的有原生ajax和iframe框架,实现图片文件上传,下面就为大家分享图片文件上传的两种方式:原生ajax和iframe框架,供大家参 ...
web自动化测试图片上传的两种方法
web自动化测试图片上传的两种方法: 通过input标签的,如: <!DOCTYPE html> <html lang="en"> <head> ...
vue获取上传图片的名字和路径_使用Vue实现图片上传的三种方式
项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务 ...
iOS:图片上传时两种图片压缩方式的比较
上传图片不全面的想法:把图片保存到本地,然后把图片的路径上传到服务器,最后又由服务器把路径返回,这种方式不具有扩展性,如果用户换了手机,那么新手机的沙盒中就没有服务器返回的图片路径了,此时就无法获取之 ...
python实现selenium文件上传的两种方式
方法一.input标签上传如果是input标签,可以直接输入路径,那么可以直接调用send_keys输入路径. 方法二.非input标签上传这种上传方式需要借助第三方工具,主要有以下三种情 ...
JavaBean实现多个文件上传的两种方法
JavaBean实现多个文件上传的两种方法王新芳刘杰北京工商大学计算机学院摘要:本文介绍了JavaBean实现多个文件上传的两种方法,分别是使用http协议和ftp协议实现.首先 ...
文件上传的三种方式-Java
前言:负责,因为该项目他(jetty嵌入式开始SpringMvc)实现文件上传的必要性,并拥有java文件上传这一块还没有被曝光.并 Http 更多晦涩协议.因此,这种渐进的方式来学习和实践上载文件的 ...
1小时搞定cropper.js制作头像/图片上传、裁剪、并发送至后端
1小时搞定cropper.js制作头像/图片上传.裁剪.并发送至后端先给大家看一下最终效果. 大多数功能都是由Cropper.js封装好的,调整并制作了: 上传图片对图片的裁剪以及调整(旋转.缩放 ...

图片上传的两种方式（前端和后端）

图片上传的两种方式（前端和后端）相关推荐

最新文章

热门文章