騰訊雲存儲上傳圖片前端處理

過程分析

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

1、本地表單處理

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

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

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

3、上傳圖片

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

本地上傳控件處理

表單美化

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

<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>

獲取上傳文件信息

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

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

圖一：

圖片信息校驗

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參數

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

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

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

// 封裝原生的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 = "";
    }
}

圖三：

注意點：

• 一、上傳成功後必定要清空表單，防止上傳同一張圖片失敗；
• 二、cos-js-sdk-v5版本和cos-js-sdk-v4調用方法不一樣
• 三、使用a標籤注意阻止默認事件
• 四、input是h5兼容性的標籤，因此對不支持h5的標籤不支持
• 五、騰訊雲參考文檔https://cloud.tencent.com/document/product/436/11459