本地文件上傳，騰訊雲

時間 2020-08-10

標籤本地文件上傳騰訊欄目騰訊简体版

原文原文鏈接

過程分析

圖片上傳主要分紅三部分：javascript

1、本地表單處理css

一、表單美化
二、獲取上傳文件信息（選擇、拖拽、一張、多張）
三、圖片信息校驗（格式、大小）
四、本地展現

2、調用接口獲取上傳須要的參數前端

一、引入cos-js-sdk-v5(jquery、axios若是必要)
二、ajax\jsonp,獲取bucket\region\appid參數

3、上傳圖片java

一、建立cos實例
二、上傳，上傳成功後清空表單，進度監控（若是必要）
三、將獲取的圖片url上傳到數據庫，其餘處理，放大效果等

本地上傳控件處理

表單美化

上傳控件通常須要美化，好比能夠用label標籤，顯示樣式，把input標籤作透明處理，寬高設置爲0，outline:none,接着就能夠爲所欲爲的美化了。jquery

<div> <label for="file" class="demo">上傳</label><input class="selImg" type="file" id="file" onchange="handleFiles(this.files)" multiple="multiple" > <!--若是須要顯示本地圖片--> <!-- <img id="showImg" src="" alt=""> --> </div> <style> input{outline:none;background:transparent;width:0;height:0;} .demo{border:1px solid #999;background:#999;color:#fff;border-radius:5px;display:block;width:100px;height:30px;text-align: center;line-height: 30px;} </style>

獲取上傳文件信息

這裏咱們處理選擇圖片，兼容一張和多張ios

// 選擇圖片 function handleFiles (files) { console.info(files)//打印出來信息見圖1 checkPic(files); } // 拖拽圖片 function handleFiles1 (files) { console.info(files) checkPic(files); } // 獲取到圖片的名稱、大小、圖片格式等

圖一：
ajax

圖片信息校驗

function checkPic (files) { var fileList = []; // 若是隻須要單張上傳，去掉multiple="multiple"，直接獲取數組第1個元素便可file = files[0]; // 若是是容許多張上傳，將上傳的圖片放入數組中,循環數組 if (files.length === 0) { return } else { for(var i=0; i<files.length; i++){ fileList.push(files[i]); } } //循環待上傳的圖片 fileList.forEach((item) => { // 1 校驗上傳圖片格式 if(!/\.(jpg|jpeg|png|JPG|PNG)$/.test(item.name)){ alert('僅支持png,jpeg,jpg格式圖片'); return } //校驗上傳圖片大小 var size = item.size/1024; if(size>5000){ alert('圖片最大不能超過5M'); return } // 上傳 // upload(obj,item) }) }

本地展現

function showImg (file) { var imgURL = ''; try{ imgURL = file.getAsDataURL(); }catch(e){ imgRUL = window.URL.createObjectURL(file); } return imgRUL; }

調用接口獲取上傳須要的參數

引入cos-js-sdk-v5

npm i cos-js-sdk-v5 或 
<script src="cos-js-sdk-v5.js"></script>

獲取bucket\region\appid參數

這些參數是從騰訊雲配置存儲桶時，帶有的。調試的時可放在前端，部署時須要放在後端。數據庫

通常騰訊雲存儲都須要用到跨域，這裏能夠在騰訊雲配置容許訪問的域名。npm

後臺如今使用的時jsonp請求接口。json

// 封裝原生的ajax function ajax(opt) { opt = opt || {}; opt.method = opt.method.toUpperCase() || 'POST'; opt.url = opt.url || ''; opt.async = opt.async || true; opt.data = opt.data || null; opt.success = opt.success || function () {}; var xmlHttp = null; if (XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else { xmlHttp = new ActiveXObject('Microsoft.XMLHTTP'); }var params = []; for (var key in opt.data){ params.push(key + '=' + opt.data[key]); } var postData = params.join('&'); if (opt.method.toUpperCase() === 'POST') { xmlHttp.open(opt.method, opt.url, opt.async); xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8'); xmlHttp.send(postData); } else if (opt.method.toUpperCase() === 'GET') { xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async); xmlHttp.send(null); } xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { opt.success(xmlHttp.responseText); } }; } // 調用ajax function http () { ajax({ method: 'GET', url: 'http://localhost/users/cosV5', success: function(res) { obj = JSON.parse(res); console.info('res', obj) } }) } // 這裏返回的參數見下圖，後面new COS 時須要用到。

上傳圖片

建立cos實例

因爲圖片過多，若是不去重命名圖片，會致使圖片太亂，能夠定義函數，重置圖片名稱。

Key 的值若是加上 /pic，系統會默認放在pic文件夾下面。

// obj爲上一步請求的配置參數 function upload (obj,file) { var cos = new COS({ AppId: obj.appId, SecretId: obj.secretId, SecretKey: obj.secretKey, }); cos.sliceUploadFile({ Bucket: obj.bucket, Region: obj.region, Key:'/pic/'+file.name, //上傳的文件夾和圖片名稱 Body: file, //要上傳的文件 onProgress: function (progressData) { /* 上傳進度 */ } }, function (err, data) { console.log(err, data); // 上傳成功返回url // 須要清空上傳控件，方法見下一步 }); }

返回參數說明

上傳成功後處理

這裏若是沒有清理控件，會出現當第二次選擇同一張圖片時，因爲圖片相同，沒法觸發onchange事件，致使沒法上傳，這裏的解決辦法是將file的value值設置爲空或從新初始化

若是不能訪問多是權限的問題，能夠在騰訊雲存儲桶配置權限，解決方法見圖三

//清空上傳控件的值id function clearInput (ele) { var demo = document.getElementById(ele); if (demo.outerHTML) { demo.outerHTML = demo.outerHTML; } else { // FF(包括3.5) demo.value = ""; } }

圖三：

注意點：