上傳圖片到七牛雲（前端和後端）

阿新 • • 發佈：2019-01-21

在開發專案的時候，經常會用到上傳圖片的功能，如果把圖片全都存放在專案路徑下，會導致專案越來越臃腫，因此可以考慮把圖片上傳交給第三方處理，此處採用七牛雲進行圖片儲存。

經過測試，通過七牛雲獲取圖片確實比直接通過自己的伺服器獲取的速度要快得多，趕快去註冊七牛雲吧。

上傳圖片的方式有兩種：

通過伺服器，將檔案傳到服務端，由服務端上傳到七牛雲
通過前端js，將檔案直接上傳到七牛雲

兩種方式都可以完成上傳，但是前者還需佔用服務端的頻寬來上傳檔案，然後再由服務端上傳；而後者僅佔用客戶端的資源，這樣可以減輕服務端的壓力。

依賴

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

前端上傳

步驟：前端通過服務端請求token，然後再通過七牛雲提供的介面進行上傳，成功後取得hash和key。

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")
    @ResponseBody
    public 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和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 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.com
        String 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;
    }
}

上傳圖片到七牛雲（前端和後端）

在開發專案的時候，經常會用到上傳圖片的功能，如果把圖片全都存放在專案路徑下，會導致專案越來越臃腫，因此可以考慮把圖片上傳交給第三方處理，此處採用七牛雲進行圖片儲存。經過測試，通過七牛雲獲取圖片確實比直接通過自己的伺服器獲取的速度要快得多，趕快去註冊七牛雲吧。

C# 檔案上傳到七牛雲伺服器（一）

本章講述：C# 中呼叫七牛雲提供的SDK，實現檔案簡單上傳功能。分片，斷點續上傳講解，請檢視：C# 檔案上傳到七牛雲伺服器（二）地址為：開發流程步驟地址：https://blog.csdn.net/BYH371256/article/details/79868562 1、把

使用vue-image-crop-upload剪裁圖片通過thinkphp5上傳到七牛雲

在此工作之前必須有七牛雲賬號和七牛雲已經建立好的空間，在賬號中可以獲取到 ACCESSKEY 和 SECRETKEY。 vue-image-crop-upload的使用方法可以參考官方的用法，如何需要滿足自己的需求，可進行一定的修改再封裝成自己的元件進行使用。 vue-image-crop-

C# 檔案上傳到七牛雲伺服器（二）

本章講述：C# 中呼叫七牛雲提供的SDK，實現檔案分片上傳、支援斷點續上傳、暫停/繼續、進度回撥顯示檔案簡單上傳講解，請檢視：C# 檔案上傳到七牛雲伺服器（一）地址為：新建類，儲存相關引數，引數註釋可參考：C# 檔案上傳到七牛雲伺服器（一） //七牛雲預設引

springboot webuploader 圖片上傳至七牛雲。

首先要註冊七牛雲。後端 pom.xml 檔案配置依賴外掛。 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring

Tp3.1 文件上傳到七牛雲

pos use ast releases 文件上傳 storage u2l image ID TP3.1 中不支持Composer 就無法用composer 安裝下載歷史的SDK https://github.com/qiniu/php-sdk/releases/

Tp3如何實現本地視頻文件上傳到七牛雲

orm slist 4類 .net 指定命名 lis xxxxxxxx ESS 對於七牛雲的使用，估計有些剛接觸開發的技術人員還不太清楚，那麽更不要說如何實現本地視頻上傳到七牛雲轉儲了，其實這個技術並沒有想象中的那麽困難，下面就來跟大家詳細介紹一下流程：　　1、首先我們

ueditor上傳檔案七牛雲

準備工作 ueditor外掛:百度雲下載資源: https://pan.baidu.com/s/1EL_hoJGTyZEf49WX0KQfvA Ueditor下載官網https://ueditor.baidu.com/website/download.html 第一匯入Maven專案中

tp3.2檔案上傳到七牛雲方法

因為tp3.2框架本身就自帶七牛雲上傳外掛，所以我們只需要配置就可以了。一、在這裡有個前提那就是大家要有七牛雲的賬號來獲取：accessKey，secrectKey，domain，bucket 二、然後在config裡面新增配置： 'UPLOAD_SITEIMG_

使用ueditor上傳到七牛雲

1、弄了兩三天了，開始改的是ueditor.jar中的原始碼上傳到七牛雲，之後發現上傳時檔案太大（100MB）導致超過了響應時間前臺報錯，而且前臺的上傳進度也看不出來，所以只能採用js-sdk中的方式 2、ueditor使用的是WebUploader上傳方式，七牛雲中提供的

看完讓你徹底理解 WebSocket 原理，附完整的實戰代碼（包含前端和後端）

tcp 協議 learn php 握手 live 雙向簡單再次註意 1、前言最近有同學問我有沒有做過在線咨詢功能。同時，公司也剛好讓我接手一個 IM 項目。所以今天抽時間記錄一下最近學習的內容。本文主要剖析了 WebSocket 的原理，以及附上一個完整的聊天室實戰

Javaweb開發（前端和後端學習資料）

JavaWeb開發學習資料開發環境：IDE： Intellij idea， Eclipse， Dreamweaver資料庫： MySQL伺服器： Tomcat後端：Java基礎入門：熟悉Java語法，String，陣列，集合框架，面向物件的封裝、繼承、多型、介面。推薦書籍

iOS整合七牛雲（上傳圖片，視訊，音訊等檔案）

用的CocoaPods匯入SDK platform :ios,'9.0' target '專案名' do pod 'AFNetworking' pod 'Qiniu' end 匯入標頭檔案 #import<QiniuSDK.h> #i

上傳圖片到七牛雲（tp5）

前期準備： 1.註冊七牛雲配置相關引數（參考七牛雲官網） 2.將七牛雲 sdk 根據七牛官網整合到tp5中程式碼部分：配置檔案(在config中) [ 'accessKey'=>'', 'secretKey'=>'', 'bu

PHP小程式上傳檔案到七牛雲（直傳）

小程式方面參考：Qiniu-wxapp-SDK 基於七牛雲 API 開發的微信小程式 SDK https://github.com/gpake/qiniu-wxapp-sdk.git PHP：小程式端引數 uptokenURL ：下面的方法具體介面地址安裝七牛雲

vue+element ui +vue-quill-editor 富文本圖片上傳到騎牛雲

temp created 編輯展示這不 tour ng- inpu pla vue-quill-editor上傳圖片會轉換成base64格式，但是這不是我們想要的，之後翻了很多文章才找到想要的，下面直接上代碼 <style lang="sass">.quil

C# 分片斷點續傳到七牛雲伺服器（一）----開發過程參考檔案

前段時間做了一個專案：在WPF上，實現檔案上傳到七牛雲伺服器和從伺服器中檔案下載的功能；下面分享開發的主要步驟： C# 分片斷點續傳到七牛雲伺服器（一）開發過程參考 1、七牛雲開發者中心：https://developer.qiniu.com/ &n

java圖片上傳-檔案/圖片上傳到七牛

java圖片上傳-檔案(圖片)上傳到七牛一、在配置檔案中引入依賴（注：七牛開發者url：https://developer.qiniu.com/kodo） <-- 引入依賴 --> <dependency> <

微信小程式上傳圖片至阿里雲OSS（支援多圖片上傳）

我們先講下為什麼要把圖片檔案上傳到雲伺服器呢，有什麼好處呢？ 1、能減輕我們自己伺服器的頻寬如果一個程式裡有多處地方用到使用者上傳圖片等功能的話，建議還是放到阿里雲或者千牛雲等其他平臺上來儲存我們的圖片，可以給公司的伺服器減少很多壓力，磁碟儲存也就不會太大 2、提升使用者體驗感

vue中使用vue-quill-editor富文字編輯器，自定義toolbar，圖片上傳到七牛

一、npm 安裝 vue-quill-editor 二、在main.js中引入 import VueQuillEditor from 'vue-quill-editor' // require styles 引入樣式 import 'quill/dist/quill.c

上傳圖片到七牛雲（前端和後端）

依賴

前端上傳

html

controller

後端上傳

七牛雲上傳檔案工具類

controller

相關推薦