以下Laravel中使用瀏覽器端上傳圖片到七牛云，下面只是做一些簡單的流程實例。
1. 首先引入相應的js文件，下面是通過CDN引入的StaticfileCDN，當然也有其他很多方式下載， bower，git，官網的SDK
七牛js基于Plupload插件封裝，所以需要下載Plupload，建議使用 2.1.1 ~ 2.1.9。
<script src="https://cdn.staticfile.org/jquery/2.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/plupload/2.1.9/moxie.js"></script> <script src="https://cdn.staticfile.org/plupload/2.1.9/plupload.dev.js"></script> <script src="https://cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.min.js"></script>
2.創建一個選擇文件的按鈕
<div id="container">
<a class="btn btn-default btn-lg " id="pickfiles" href="#" rel="external nofollow" >
<span>選擇文件</span>
</a>
</div>
3.初始化 uploader
(請確保在執行初始化時，頁面已經引入 plupload),這里我們需要一個uptoken上傳憑證，這個需要php后端生成提供。一會下面我們來說怎么獲取token。
function uploaderReady(token) {
console.log(token);
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4', // 上傳模式，依次退化
browse_button: 'pickfiles', //上傳按鈕的ID
uptoken: token, // uptoken是上傳憑證，由其他程序生成
// uptoken_url: '/uptoken', // Ajax請求uptoken的Url，強烈建議設置（服務端提供）
// uptoken_func: function(){ // 在需要獲取uptoken時，該方法會被調用
// // do something
// return uptoken;
// },
get_new_uptoken: false, // 設置上傳文件的時候是否每次都重新獲取新的uptoken
unique_names: true, // 默認false，key為文件名。若開啟該選項，JS-SDK會為每個文件自動生成key（文件名）
//save_key: true, // 默認false。若在服務端生成uptoken的上傳策略中指定了sava_key，則開啟，SDK在前端將不對key進行任何處理
domain: 'http://ovngj7u9c.bkt.clouddn.com', // bucket域名，下載資源時用到，必需
container: 'container', // 上傳區域DOM ID，默認是browser_button的父元素
max_file_size: '100mb', // 最大文件體積限制
flash_swf_url: 'path/of/plupload/Moxie.swf', //引入flash，相對路徑
max_retries: 1, // 上傳失敗最大重試次數
dragdrop: true, // 開啟可拖曳上傳
drop_element: 'container', // 拖曳上傳區域元素的ID，拖曳文件或文件夾后可觸發上傳
chunk_size: '4mb', // 分塊上傳時，每塊的體積
auto_start: true, // 選擇文件后自動上傳，若關閉需要自己綁定事件觸發上傳
init: {
'FilesAdded': function (up, files) {
plupload.each(files, function (file) {
// 文件添加進隊列后，處理相關的事情
});
},
'BeforeUpload': function (up, file) {
// 每個文件上傳前，處理相關的事情
},
'UploadProgress': function (up, file) {
// 每個文件上傳時，處理相關的事情
},
'FileUploaded': function (up, file, info) {
// 每個文件上傳成功后，處理相關的事情
// 其中info是文件上傳成功后，服務端返回的json，形式如：
// {
// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
// "key": "gogopher.jpg"
// }
// 獲取url路徑 傳入后臺保存到數據庫
var domain = up.getOption('domain');
var url = JSON.parse(info);
var sourceLink = domain +"/"+ url.key;
$.ajax({
url: '/image',
type: 'POST',
dataType : 'json',
data: {
'_token':"{{ csrf_token() }}",
"url":sourceLink
},
});
},
'Error': function (up, err, errTip) {
console.log(errTip);
},
'UploadComplete': function () {
//隊列文件處理完畢后，處理相關的事情
},
'Key': function (up, file) {
// 若想在前端對每個文件的key進行個性化處理，可以配置該函數
// 該配置必須要在unique_names: false，save_key: false時才生效
var key = "";
// do something with key here
return key
}
}
});
}
4.后端獲取上傳憑證token
首先我們先去安裝一個七牛的packagist，github地址。
composer require "overtrue/laravel-filesystem-qiniu" -vvv
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。