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

29 lines
806 B
Vue
Raw Permalink 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-fileupload class="tiny-svg-size icon-fileupload"></tiny-icon-fileupload>
</tiny-file-upload>
</template>
<script setup>
import { ref } from 'vue'
import { FileUpload as TinyFileUpload, Modal } from '@opentiny/vue'
import { iconFileupload } from '@opentiny/vue-icon'
const action = ref('http://localhost:3000/api/upload')
const TinyIconFileupload = iconFileupload()
function dropErrorHandler(files) {
Modal.message(`${files.length}个文件拖拽失败`)
}
</script>
<style scoped>
.tiny-upload__text {
color: #595959;
margin-bottom: 8px;
font-size: 14px;
}
</style>