在vue裏面實現webupload參數動態傳遞

一、html

<template>
  <div>
    <div id="upload" ref="button"></div>
  </div>
</template>

二、js

<script>
  import $ from 'jquery';
  import WebUploader from 'webuploader';
  import uploaderSwf from 'webuploader/dist/Uploader.swf';

  export default {
    name: 'PrivatizationUpload',
    data() {
      return {
        chunked: false,
        attachments: {},
        threads: 1,
        fileKey: null
      };
    },
    computed: {
      btnId() {
        return Utils.uuid();
      },
      options() {
        return {
          server: 'http://www.baidu.com',
          chunked: false,
          swf: uploaderSwf,
          pick: {
            id: '#upload',
            multiple: false
          },
          auto: true,
          fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M
        };
      }
    },
    methods: {
      },
    created() {
    },
    mounted() {
      let $this = this;
      WebUploader.Uploader.register({
      	name:'file-store-token',
        'before-send-file': 'beforeSendFile' //文件發送之前的監聽函數
      }, {
        beforeSendFile: function(file) {
          let me = this;
          let d = WebUploader.Deferred();
		  let formData = { id:111,name:222 };
         	$this.uploader.option('formData', formData);//參數改變完成賦值
		  d.resolve(file);//然後繼續發送文件
          return d.promise();
        }
      });
      this.uploader = WebUploader.create(this.options);//初始化webupload
      document.querySelector('.webuploader-pick').innerHTML = '<button>上傳附件</button>';//自定義上傳按鈕
      this.uploader.on('uploadProgress', (file, percentage) => {
        console.log(percentage)//文件上傳進度
      });
      this.uploader.on('uploadSuccess', (file, res) => {
         console.log(res)//文件上傳成功
      });
      this.uploader.on('error', type => {
         console.log(type)//文件上傳格式校驗失敗
      });
      this.uploader.on('uploadError', (file, reason) => {
         console.log(reason)//文件上傳失敗
      });
    },
	destroyed() { //頁面註銷後銷燬實例
      WebUploader.Uploader.unRegister('file-store-token');//刪除註冊的插件
      if (this.uploader) {
        try {
          this.uploader.destroy();
        } catch (e) {
          //
        }
      }
    }
  };
</script>