ionic3 上傳圖片、壓縮圖片到阿里雲服務端簽名後直傳

weixin_34377065發表於2018-06-08

1.為什麼用plupload.js
首先使用這個plupload是因為我採用的【阿里雲服務端簽名後直傳】，使用的是這個方法。
放上阿里雲的地址：https://help.aliyun.com/document_detail/31926.html?spm=a2c4g.11174283.6.634.PYDsbd

2.關於plupload.js
大致有以下幾個引數：

      runtimes: 'html5,flash,silverlight,html4', // 用來指定上傳方式
      browse_button: 'selectfiles', // 觸發檔案選擇對話方塊的DOM元素
      multi_selection: false, // 是否可以在檔案瀏覽對話方塊中選擇多個檔案，true為可以，false為不可以
      container: document.getElementById('container'), // 用來指定Plupload所建立的html結構的父容器
      url: '*******', // 伺服器端接收和處理上傳檔案的指令碼地址
      filters: {
        mime_types: [ // 用來限定上傳檔案的型別
          { title: "Image files", extensions: "jpg,jpeg,gif,png,bmp" },
        ],
        max_file_size: '10mb', // 用來限定上傳檔案的大小
        prevent_duplicates: true, // 是否允許選取重複的檔案，為true時表示不允許，為false時表示允許，預設為false。如果兩個檔案的檔名和大小都相同，則會被認為是重複的檔案
      },
      resize: { // 壓縮
        width：1000，
        height：800，
        crop: false,
        quality: 90,
        preserve_headers: false
      },

大致的事件：

Init // 當Plupload初始化完成後觸發
PostInit // 當Init事件發生後觸發
FilesAdded // 當檔案新增到上傳佇列後觸發
BeforeUpload // 當佇列中的某一個檔案正要開始上傳前觸發
UploadProgress // 顯示上傳進度
FileUploaded  // 當佇列中的某一個檔案上傳完成後觸發
Error  // 錯誤

以上是我用到的，大家可以根據自己的需求去新增。具體可參考部落格：https://www.cnblogs.com/2050/p/3913184.html。
寫的很詳細了，我也是參考這個部落格的，對plupload有了進一步認識。

3.使用
html：

<img class="photo" src="{{photourl}}" alt="">
<div id="ossfile" class="ossfile"></div>
<div id="container" class="upload_btn">
     <button ion-button icon-only id="selectfiles">選擇檔案</button>
     <button ion-button icon-only id="postfiles">開始上傳</button>
</div>

ts:

set_upload_param(up, filename) {
    let token = ********;
    ***********.subscribe((body: any) => {
    // 這裡是我向後臺傳送的請求 獲取到需要上傳給 阿里雲的資料
        let new_multipart_params = {
          'key': dir + '${filename}',
          'policy':policy,
          'OSSAccessKeyId':accessid,
          'success_action_status': '200', //讓服務端返回200,不然，預設會返回204
          'signature': signature,
          'x-oss-object-acl': 'public-read'
        };
        up.setOption({
          'url': host,
          'multipart_params': new_multipart_params
        });
        up.start();
      }
    })
  }

  uploadImg() {
  // 這裡需要注意 this 的指向問題
    let that = this;
    this.uploader = new plupload.Uploader({
      runtimes: 'html5,flash,silverlight,html4',
      browse_button: 'selectfiles', 
      multi_selection: false, 
      container: document.getElementById('container'), 
      url: '*******', 
      filters: {
        mime_types: [ 
          { title: "Image files", extensions: "jpg,jpeg,gif,png,bmp" },
        ],
        max_file_size: '10mb', 
        prevent_duplicates: true, 
      },
      resize: { 
        crop: false,
        quality: 90,
        preserve_headers: false
      },

      init: {
        PostInit: function () {
          document.getElementById('postfiles').onclick = function () {
            that.set_upload_param(that.uploader, '');
            return false;
          };
        },

        FilesAdded: function (up, files) {
          document.getElementById('ossfile').innerHTML = '';
          plupload.each(files, function (file) {
            document.getElementById('ossfile').innerHTML += '<div id="' + file.id + '">' + '(' + file.name + ')<b></b>'
              + '<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>'
              + '</div>';
          });

          // 這裡【重點】：獲取圖片的原始尺寸來進行計算 壓縮的尺寸
          // 我這裡設定的寬1000，高800 
          let image = new Image();
          let reader = new FileReader();
          reader.onload = (readerEvent: any) => {
            image.onload = () => {
              let originalWidth = image.width; // 原始圖片的寬
              let originalHeight = image.height; // 原始圖片的高
              if (originalWidth >= 1000) {
                that.uploader.settings.resize.width = 1000;
                that.uploader.settings.resize.height = Math.floor(originalHeight * (that.uploader.settings.resize.width / originalWidth));
                if (that.uploader.settings.resize.height > 800) {
                  that.uploader.settings.resize.width = Math.floor(that.uploader.settings.resize.width * (800 / that.uploader.settings.resize.height));
                  that.uploader.settings.resize.height = 800;
                }
              }
              else if (originalHeight > 800) {
                that.uploader.settings.resize.height = 800;
                that.uploader.settings.resize.width = Math.floor(originalWidth * (that.uploader.settings.resize.height / originalHeight));
              }
              else {
                that.uploader.settings.resize.width = originalWidth;
                that.uploader.settings.resize.height = originalHeight;
              }
            };
            image.src = readerEvent.target.result;
          };
          reader.readAsDataURL(files[0].getNative());
        },

        BeforeUpload: function (up, file) {
          that.set_upload_param(up, file.name);
        },

        UploadProgress: function (up, file) {
          var d = document.getElementById(file.id);
          d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
          var prog = d.getElementsByTagName('div')[0];
          var progBar = prog.getElementsByTagName('div')[0]
          progBar.style.width = 2 * file.percent + 'px';
          progBar.setAttribute('aria-valuenow', file.percent);
        },

        FileUploaded: function (up, file, info) {
          if (info.status == 200) {
            that.appStatus.infoMsg('上傳成功');
            // 這一步是 上傳成功後，清除進度條
            document.getElementById('ossfile').innerHTML = '';
          }
          else if (info.status == 203) {
            console.log('上傳到OSS成功，但是oss訪問使用者設定的上傳回撥伺服器失敗');
            console.log('失敗原因是:' + info.response);
          }
          else {
            console.log('失敗原因是:' + info.response);
          }
        },

        Error: function (up, err) {
          if (err.code == -600) {
            that.appStatus.infoMsg("選擇的檔案太大了！")
          }
          else if (err.code == -601) {
            that.appStatus.infoMsg("選擇的上傳檔案型別不對！")
          }
          else if (err.code == -602) {
            that.appStatus.infoMsg("這個檔案已經選擇過一遍了！")
          }
          else {
            console.log(err.response)
          }
        }
      }
    });
    this.uploader.init();
  }

【重點】：

this的指向問題
resize的寬高動態賦值需要是：uploader.settings.resize.width 、uploader.settings.resize.height
resize只給寬，比如
resize: {
width：800，
crop: false,
quality: 90,
preserve_headers: false
},
這個能實現壓縮，圖片體積可以壓縮，寬高可以不進行剪裁同比例縮小。圖片大於800進行壓縮，小於不壓縮。我的需求是限定了高，所以要進行計算。
案例上的進度條是同時存在多個。我的需求是只顯示一個，成功後消失。具體程式碼是：

FilesAdded: function (up, files) {
          document.getElementById('ossfile').innerHTML = '';
          plupload.each(files, function (file) {
            document.getElementById('ossfile').innerHTML += '<div id="' + file.id + '">' + '(' + file.name + ')<b></b>'
              + '<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>'
              + '</div>';
          });
}

FileUploaded: function (up, file, info) {
          if (info.status == 200) {
            that.appStatus.infoMsg('上傳成功');
            // 這一步是 上傳成功後，清除進度條
            document.getElementById('ossfile').innerHTML = '';
          }
}

這個實現了我的需求，還有許多不足之處，大家可以做個參考！

最後給大家看下我的頁面效果：

image.png

js上傳圖片壓縮
2019-02-16
JS
vue 上傳圖片進行壓縮圖片
2020-09-25
Vue
java，springboot + thymeleaf 上傳圖片、刪除圖片到伺服器、本地，壓縮圖片上傳(有些圖片會失真)，原圖上傳
2020-12-06
JavaSpring Boot伺服器
前端圖片壓縮及上傳
2019-02-02
前端
vue 圖片上傳到阿里雲oss
2018-07-09
Vue阿里
Flutter 上傳圖片到阿里雲OSS
2021-03-31
Flutter阿里
angular上傳圖片到.netcore後端
2019-03-18
AngularNetCore後端
前端的圖片壓縮image-compressor（可在圖片上傳前實現圖片壓縮）
2018-04-17
前端
JS—圖片壓縮上傳（單張）
2018-08-13
JS
小程式上傳圖片到阿里雲oss
2018-06-16
阿里
ueditor jsp版上傳圖片到阿里雲
2018-06-05
JS阿里
圖片裁剪並上傳到阿里雲oss
2020-12-08
阿里
layui中實現上傳圖片壓縮
2018-08-28
UI
Android圖片上傳到阿里雲OSS小案例
2018-08-23
Android阿里
上傳圖片以及做成縮圖
2020-04-07
移動端使用localResizeIMG4壓縮圖片並上傳
2018-12-20
一個Vue圖片上傳剪裁壓縮元件
2019-03-26
Vue元件
如何使用FormData上傳壓縮裁剪後的圖片Blob物件
2021-09-09
ORM物件
.Net 圖片縮圖上傳通用方法
2018-07-31
Laravel 上傳圖片到七牛雲
2019-03-06
Laravel
canvas簽名圖片上傳及入庫問題
2024-03-28
Canvas
PbootCMS上傳圖片被壓縮怎麼解決
2024-08-16
boot
基於vue + axios + lrz.js 微信端圖片壓縮上傳
2019-06-24
VueiOSJS
vue+element 將圖片壓縮並轉換成base64上傳圖片
2018-11-09
Vue
上傳圖片
2024-11-06
golang對接阿里雲私有Bucket上傳圖片、授權訪問圖片
2022-04-03
Golang阿里
python 開發一款圖片壓縮工具（四）：上傳圖床
2020-04-29
Python圖床
使用tinypng對需要上傳Gitee圖床的圖片進行壓縮
2021-10-18
Gitee圖床
在瀏覽器端用H5實現圖片壓縮上傳
2019-02-16
瀏覽器H5
android短視訊開發，呼叫相機、相簿，壓縮圖片後上傳
2021-12-16
Android
圖片上傳及圖片處理
2019-03-22
uniapp小程式上傳圖片到騰訊雲
2024-05-14
APP
electron上傳圖片
2020-10-19
上傳圖片js
2024-08-19
JS
裁剪上傳圖片
2023-03-02
觸屏 H5 如何實現壓縮並上傳多張圖片，同時還可以進行圖片壓縮
2019-06-14
H5
自動壓縮上傳的JPG/PNG圖片Wordpress外掛-TinyPNG
2018-05-20
微信小程式開發：上傳網路圖片到阿里雲oss
2024-03-13
微信小程式阿里

ionic3 上傳圖片、壓縮圖片到阿里雲 服務端簽名後直傳

相關文章

ionic3 上傳圖片、壓縮圖片到阿里雲服務端簽名後直傳