tiny-vue/examples/sites/demos/pc/app/file-upload/drag-upload-composition-api...

29 lines
791 B
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="tiny-upload__text">将文件拖到此处<em>点击上传</em></div>
<tiny-file-upload drag :action="action" multiple accept=".png,.jpeg,.jpg" @drop-error="dropErrorHandler">
<tiny-icon-picture class="tiny-svg-size icon-fileupload"></tiny-icon-picture>
</tiny-file-upload>
</template>
<script setup>
import { ref } from 'vue'
import { FileUpload as TinyFileUpload, Modal } from '@opentiny/vue'
import { iconPicture } from '@opentiny/vue-icon'
const action = ref('http://localhost:3000/api/upload')
const TinyIconPicture = iconPicture()
function dropErrorHandler(files) {
Modal.message(`${files.length}个文件拖拽失败`)
}
</script>
<style scoped>
.tiny-upload__text {
color: #595959;
margin-bottom: 8px;
font-size: 14px;
}
</style>