上传文件组件。

基础示例

组件的绑定值可以是一个 url 字符串，也可以是一个 {name: ,url: ,size: , type:} 格式的对象。组件支持设置 :upload=fn 设置文件上传后的逻辑，fn 特征为 ({file, progress})=>url。

<template>
  <EBlock>
    <EBlock style="margin-bottom: 10px;">上传成功示例：</EBlock>
    <EUpload v-model="valueSuccess" :upload="testUpload" placeholder="上传成功" />
     <EBlock style="margin-bottom: 10px;">上传失败示例：</EBlock>
    <EUpload v-model="valueFail" :upload="failUpload" placeholder="上传失败" />
  </EBlock>
</template>

<script>
const {createRequestApi} = window['engage-common']['engage'];
window.upload = async function({ file, progress }) {
  let prog = 0;
  await new Promise((resolve) => {
    const itv = setInterval(() => {
      prog += 35;
      progress(prog);
      if (prog > 50) {
        clearInterval(itv);
        resolve();
      }
    }, 500);
  });

  const formData = new FormData();
  formData.append('file', file);

  const result = await createRequestApi({}, { url: 'https://httpbin.org/post', body: formData, progress });
  return result.files.file;
};

export default {
  name: 'EUploadShowcase',
  data() {
    return {
      valueSuccess:'',
      valueFail: 'https://cdn.pixabay.com/photo/2018/06/29/08/15/doodle-3505459_1280.png'
    };
  },
  methods: {
    async failUpload({ file, progress }) {
      let prog = 0;
      await new Promise((resolve) => {
        const itv = setInterval(() => {
          prog += 20;
          progress(prog);
          if (prog > 50) {
            clearInterval(itv);
            resolve();
          }
        }, 500);
      });
      throw new Error('服务器没有响应，上传失败');
    },

    async testUpload({ file, progress }) {
      return window.upload({ file, progress })
    }
  },
};
</script>

文件类型

组件默认支持所有的文件类型，可通过设置 accept 属性指定仅支持的文件类型，accept 即 HTML input accept attribute，如 ".jpg,.gif"。

<template>
  <EBlock>
    <EBlock style="margin-bottom: 10px;">默认支持全部的文件类型</EBlock>
    <EUpload v-model="value" :upload="testUpload" placeholder="支持全部文件类型" />
    <EBlock style="margin-bottom: 10px;">仅支持 gif </EBlock>
    <EUpload v-model="value1" :upload="testUpload" accept=".gif" placeholder="仅支持gif" />
  </EBlock>
</template>

<script>
const {createRequestApi} = window['engage-common']['engage'];
export default {
  name: 'EUploadShowcase',
  data() {
    return {
      value:'',
      value1:''
    };
  },
  methods: {
    async testUpload({ file, progress }) {
      return window.upload({ file, progress })
    }
  },
};
</script>

预置文件

<template>
  <EBlock>
    <EBlock style="margin-bottom: 10px;">String Value: {{value}}</EBlock>
    <EUpload v-model="value" :upload="testUpload" placeholder="String Value" />
    <EBlock style="margin-bottom: 10px;">Object Value: {{value1}}</EBlock>
    <EUpload v-model="value1" :upload="testUpload" placeholder="Object Value" />
  </EBlock>
</template>

<script>
const {createRequestApi} = window['engage-common']['engage'];
export default {
  name: 'EUploadShowcase',
  data() {
    return {
      value: 'https://cdn.pixabay.com/photo/2018/06/29/08/15/doodle-3505459_1280.png',
      value1 : {
        name: '2019年潜在客户表.xlsx',
        type: 'file',
      },
    };
  },
  methods: {
    async testUpload({ file, progress }) {
      return window.upload({ file, progress })
    }
  },
};
</script>

必填效果

搭配 EFormItem，通过 validation 来进行一些校验。

<template>
  <EBlock>
    <EFormItem label="必填效果" helper="必填">
      <EUpload v-model="value" placeholder="上传图片" :upload="testUpload"
        :validation="{required: true}" />
    </EFormItem>
  </EBlock>
</template>

<script>
const {createRequestApi} = window['engage-common']['engage'];
export default {
  name: 'EUploadShowcase',
  data() {
    return {
      value:'',
    };
  },
  methods: {
    async testUpload({ file, progress }) {
      return window.upload({ file, progress })
    }
  },
};
</script>

大小限制

通过设置 maxFileSize 属性来限制文件的大小。

<template>
  <EBlock>
    <EFormItem label="大小限制" helper="大小限制 1M">
      <EUpload placeholder="上传图片" :upload="testUpload" :max-file-size="1024*1024" />
    </EFormItem>
  </EBlock>
</template>

<script>
const {createRequestApi} = window['engage-common']['engage'];
export default {
  name: 'EUploadShowcase',
  data() {
    return {
      value:'',
    };
  },
  methods: {
    async testUpload({ file, progress }) {
      return window.upload({ file, progress })
    }
  },
};
</script>

比例限制

通过设置 imageLimit 属性来限制图片的规格，目前只支持设置为 :image-limit="{ratio: 1}" 即长宽都一样。

<template>
  <EBlock>
    <EFormItem label="比例限制" helper="图片比例限制为 1:1">
        <EUpload placeholder="上传图片" :upload="testUpload" :image-limit="{ratio: 1}" />
    </EFormItem>
  </EBlock>
</template>

<script>
const {createRequestApi} = window['engage-common']['engage'];
export default {
  name: 'EUploadShowcase',
  data() {
    return {
      value:'',
    };
  },
  methods: {
    async testUpload({ file, progress }) {
      return window.upload({ file, progress })
    }
  },
};
</script>

EUpload

Props

Name	Description	Type	Required	Default
value	文件（或文件列表）的 URL，也支持传入一个对象（{name: ,url: ,size: , type:}）	String / Array / Object	false	-
multiple	多文件	Boolean	false	-
disabled	禁用	Boolean	false	-
accept	即 HTML input accept attribute，如 ".jpg,.gif"	String	false	-
maxFileSize	单个文件的最大字节数	String / Number	false	-
imageLimit	图片规格限制，{ratio: 1}。目前只支持 ratio: 1，即宽高一样	Object	false	-
upload	函数特征：({file, progress})=>url	Function	false	-

Events

Event Name	Description	Parameters
input	-	-

MixIns

MixIn
EValidationMixin