vue plupload 的使用 前端上傳組件Plupload使用指南

 

1.  首選npm安裝plupload 

2. 阿里雲OSS PHP 安全上傳

<template>
  <div class="imgUpload">
    aaa
    <br>
    <div id="ossfile">你的瀏覽器不支持flash,Silverlight或者HTML5！</div>

    <div id="container">
      <a id="selectfiles" href="javascript:void(0);" class="btn">選擇文件</a>
      <a id="postfiles" href="javascript:void(0);" class="btn">開始上傳</a>
    </div>

    <pre id="console"></pre>
  </div>
</template>

<script>
import plupload from "plupload";

var accessid = "";
var accesskey = "";
var host = "";
var policyBase64 = "";
var signature = "";
var callbackbody = "";
var filename = "";
var key = "";
var expire = 0;
var g_object_name = "";
var g_object_name_type = "";
var now = Date.parse(new Date()) / 1000;
var timestamp = Date.parse(new Date()) / 1000;

function send_request() {
  var xmlhttp = null;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  if (xmlhttp != null) {
    // serverUrl是 用戶獲取 '簽名和Policy' 等信息的應用服務器的URL，請將下面的IP和Port配置爲您本身的真實信息。
    // serverUrl = 'http://88.88.88.88:8888/aliyun-oss-appserver-php/php/get.php'
    let serverUrl = "http://xxx/oss/up/";

    xmlhttp.open("GET", serverUrl, false);
    xmlhttp.send(null);
    return xmlhttp.responseText;
  } else {
    alert("Your browser does not support XMLHTTP.");
  }
}

function check_object_radio() {
  var tt = document.getElementsByName("myradio");
  for (var i = 0; i < tt.length; i++) {
    if (tt[i].checked) {
      g_object_name_type = tt[i].value;
      break;
    }
  }
}

function get_signature() {
  // 能夠判斷當前expire是否超過了當前時間， 若是超過了當前時間， 就從新取一下，3s 做爲緩衝。
  now = timestamp = Date.parse(new Date()) / 1000;
  if (expire < now + 3) {
    let body = send_request();
    var obj = eval("(" + body + ")");
    host = obj["host"];
    policyBase64 = obj["policy"];
    accessid = obj["accessid"];
    signature = obj["signature"];
    expire = parseInt(obj["expire"]);
    callbackbody = obj["callback"];
    key = obj["dir"];
    return true;
  }
  return false;
}

function random_string(len) {
  len = len || 32;
  var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
  var maxPos = chars.length;
  var pwd = "";
  for (i = 0; i < len; i++) {
    pwd += chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return pwd;
}

function get_suffix(filename) {
  let pos = filename.lastIndexOf(".");
  let suffix = "";
  if (pos != -1) {
    suffix = filename.substring(pos);
  }
  return suffix;
}

function calculate_object_name(filename) {
  if (g_object_name_type == "local_name") {
    g_object_name += "${filename}";
  } else if (g_object_name_type == "random_name") {
    let suffix = get_suffix(filename);
    g_object_name = key + random_string(10) + suffix;
  }
  return "";
}

function get_uploaded_object_name(filename) {
  if (g_object_name_type == "local_name") {
    tmp_name = g_object_name;
    tmp_name = tmp_name.replace("${filename}", filename);
    return tmp_name;
  } else if (g_object_name_type == "random_name") {
    return g_object_name;
  }
}

function set_upload_param(up, filename, ret) {
  if (ret == false) {
    ret = get_signature();
  }
  g_object_name = key;
  if (filename != "") {
    let suffix = get_suffix(filename);
    calculate_object_name(filename);
  }
  let new_multipart_params = {
    key: g_object_name,
    policy: policyBase64,
    OSSAccessKeyId: accessid,
    success_action_status: "200", //讓服務端返回200,否則，默認會返回204
    callback: callbackbody,
    signature: signature
  };

  up.setOption({
    url: host,
    multipart_params: new_multipart_params
  });

  up.start();
}

export default {
  model: {
    prop: "msg",
    event: "ee"
  },
  props: {
    msg: ""
  },
  data() {
    return {
      url: this.msg || ""
    };
  },
  created() {},
  mounted() {
    this.initPlUploader();
  },
  methods: {
    /**
     * 初始化上傳插件
     */
    initPlUploader() {
      var uploader = new plupload.Uploader({
        runtimes: "html5,flash,silverlight,html4",
        browse_button: "selectfiles",
        //multi_selection: false,
        // container: document.getElementById('container'),
        // flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf',
        // silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap',
        url: "http://oss.aliyuncs.com",

        filters: {
          mime_types: [
            //只容許上傳圖片和zip文件
            { title: "Image files", extensions: "jpg,gif,png,bmp" },
            { title: "Zip files", extensions: "zip,rar,ipa" }
          ],
          max_file_size: "20mb", //最大隻能上傳10mb的文件
          prevent_duplicates: true //不容許選取重複文件
        },

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

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

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

          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) {
              document
                .getElementById(file.id)
                .getElementsByTagName("b")[0].innerHTML =
                "upload to oss success, object name:" +
                get_uploaded_object_name(file.name) +
                " 回調服務器返回的內容是:" +
                info.response;
            } else if (info.status == 203) {
              document
                .getElementById(file.id)
                .getElementsByTagName("b")[0].innerHTML =
                "上傳到OSS成功，可是oss訪問用戶設置的上傳回調服務器失敗，失敗緣由是:" +
                info.response;
            } else {
              document
                .getElementById(file.id)
                .getElementsByTagName("b")[0].innerHTML = info.response;
            }
          },

          Error: function(up, err) {
            if (err.code == -600) {
              document
                .getElementById("console")
                .appendChild(
                  document.createTextNode(
                    "\n選擇的文件太大了,能夠根據應用狀況，在upload.js 設置一下上傳的最大大小"
                  )
                );
            } else if (err.code == -601) {
              document
                .getElementById("console")
                .appendChild(
                  document.createTextNode(
                    "\n選擇的文件後綴不對,能夠根據應用狀況，在upload.js進行設置可容許的上傳文件類型"
                  )
                );
            } else if (err.code == -602) {
              document
                .getElementById("console")
                .appendChild(
                  document.createTextNode("\n這個文件已經上傳過一遍了")
                );
            } else {
              document
                .getElementById("console")
                .appendChild(
                  document.createTextNode("\nError xml:" + err.response)
                );
            }
          }
        }
      });
      uploader.init();
    }
  },
  watch: {}
};
</script>

<style lang="less" scoped>
@import "./less.less";
</style>

 

3. 瞭解更多plupload的配置參考：

前端上傳組件Plupload使用指南： http://www.javashuo.com/article/p-yuxgpkex-e.html

 https://www.jianshu.com/p/b54af6e5539c?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation