upload 上传组件 #

<template>
  <div>
  <p><Upload v-model="the.file"  @onEvent="onUploadEvent">上传图片</Upload></p>
   <p><Upload :mark="the.mark" @onEvent="onUploadEvent">上传图片,水印模式imgMin 函数会导致图片变大Bug，慎用</Upload></p>
    <Upload :multiple="true"
                named="file"
                type="execl"
                @onEvent="onUploadEvent">上传文件</Upload>
  </div>
</template>

<script>
export default {
  setup (props, { emit }) {

    const $plus = window.$plus;
    const frame  = $plus.frame;
    const reactive = $plus.vue.reactive;

   const the = reactive({
     // 图片水印
     mark: { text: 'Quick', font: 'bold 10rem Arial', y: 100 },
     // 支持单张图片双向绑定 base64
     file:''
   });

    /**
     * 上传事件 
     * 
    */
    const onUploadEvent = (res) => {
      console.log('onUploadEvent:' + res.data.length, res);
      switch (res.cmd) {
        case 'delete':
          console.log('onUploadEvent.', res.cmd);
          break;
        case 'imageZoom':
          // 预览图点击放大
          frame.open('<img width="100%" src="' + res.data.src + '" />');
          break;
        case 'execl': // type 参数事件

          // 结果输出，触发上传事件
          break;
        case 'base64':
           console.log('onUpload.base64',the.file);
        // 图片转码结果输出，触发上传事件,返回本地文件内容
        // res.data=[{
        // // 没超过max,可以上传
        // isUpload: true,
        // // 文件名
        // name: file.name,
        // lastModified: file.lastModified,
        // // 尺寸大小
        // size: file.size,
        // // 文件类型
        // type: file.type,
        // // 文件数据
        // data: null,
        // // 图片转换base64
        // src: null,
        // // 文件描述
        // title: ''
        // }]
          break;
      }
    };

    return {the, onUploadEvent}
  }
}
</script>