请问vue里面怎么封装一个组件的id，如何能在调用的时候能传不同的id
我在写webuploader分片上传，如果只有一个上传还好。但是一个页面肯定有几个上传图片的地方。
我就想封装成组件，去调用。但是webuploader需要有独立的id。我不知道怎么去封装可以随时变的id。
下面代码的“filePicker”就是独立的id

<template>
    <div class="sqy-imgfile">
        <div id="filePicker"></div>
        <svg-icon icon-class="upload"/>
        <img src="" alt="" class="sqy-imgview">
    </div>
</template>
<script>
import $ from 'jquery'
import WebUploader from 'webuploader'
export default {
    data() {
      return {
      }
    },
 mounted() {
      this.initWebUpload();
  },
 methods:{
   initWebUpload() {
      var uploader = WebUploader.create({
        // swf文件路径
        swf:'/src/styles/Uploader.swf',
        // 文件接收服务端。
        server: '',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,
        //是否开启自动上传
        auto:true
      });
      // 文件上传过程中创建进度条实时显示。
      uploader.on( 'fileQueued', function( file ) {
        var $li = $(
                '<div id="' + file.id + '" class="sqy-file-item"></div>'
                ),
            $img = $li.find('img');
        // $list为容器jQuery实例
        $("#filePicker").append( $li );
    });
    uploader.on( 'uploadProgress', function(file, percentage ) {
      var $li = $( '#'+file.id ),
            $percent = $li.find('.sqy-progress span');
      let percentageFix=percentage.toFixed(2)
        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<p class="sqy-progress"><span></span></p>').appendTo( $li ).find('span');
        }
        $percent.css( 'width', percentageFix * 100 + '%' );
        $percent.text(percentageFix * 100 + '% 正在上传中');
    });
    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file,response ) {
        $( '#'+file.id ).addClass('upload-state-done');
        $( '.sqy-imgview' ).attr("src",response.data.webp);
    });
    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');
        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="sqy-error"></div>').appendTo( $li );
        }
        $error.text('上传失败 !');
    });
    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).remove();
    });
   }
  }
}
</script>
<style>
.webuploader-container {
  width:100%;
  height:100%;
  position: relative;
  z-index: 3;
}
.webuploader-element-invisible {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px);
}
.webuploader-pick{
	position: relative;
	display: inline-block;
	cursor: pointer;
	width:100%;
  height:100%;
}
.webuploader-pick-disable {
	opacity: 0.6;
	pointer-events:none;
}
.sqy-imgfile{
  width: 150px;
  height: 150px;
  border: 1px solid #ddd;
  display: inline-block;
  position: relative;
}
.sqy-imgview{
  width: 150px;
  height: 100%;
  display: inline-block;
  position: absolute;
  left: 0;
  top:0;
}
.sqy-file-item{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  z-index: 1999;
  background: rgba(0,0,0,0.4);
}
.sqy-progress{
  margin:14vh auto;
  width:500px;
  height:24px;
  background-color: #ebeef5;
  border-radius: 100px;
  white-space: nowrap;
  transition: width .6s ease;
}
.sqy-progress span{
  height:24px;
  line-height: 24px;
  display: inline-block;
  background-color: #67c23a;
  border-radius: 100px;
  text-align: center;
}
.sqy-error{
  color:red;
  font-style: 20px;
}
.sqy-imgfile .svg-icon{
  width: 9em;
  height: 9em;
  position: absolute;
  top: 0;
  left: 0;
}
</style>