Vue3实现拖放式上传

在这篇《拖放式上传 》https://www.cnblogs.com/insus/p/22955345
的基础上，在大部分功能已经实现，搬移至Vue3的环境中，Insus.NET稍微改一下即可。

引入Vue3类库。和计划使用axios.min.js进行数据获取等。

 <%--<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>--%>
 <script src="../../Scripts/vue.global.js"></script>

 <%--<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>--%>
 <script src="../../Scripts/axios.min.js"></script>

 

Html markup,

 

<div style="margin-top: 3px;">
    <div id="app">
        <div v-if="loading">加载中...</div>
        <div v-else-if="error">{{ error }}</div>
        
        <%--把前一篇的html markup 拉到这里来。--%>
        <%--如果你有实现过前一篇，添加外层vue3代码特征即可。--%>
    </div>
</div>

 
Vue3 javascript,

 

展开标志A，

 

const uploadFile = async (file) => {
    if (!file) {
        alert('没有选择文件');
        return;
    }

    const url = '/api/ul/UploadImage';
    const payload = new FormData();
    payload.append("file", file);

    try {
        const response = await axios.post(url, payload, {
            headers: { 'Content-Type': 'multipart/form-data' }
        });

        const data = response.data;
        if (data.Status) {
            alert(data.Message);
        } else {
            alert(data.Message || '上传失败');
        }
    } catch (error) {
        console.error('Error uploading file:', error);
        alert('上传失败，请重试');
    }
};

 

展开标志B，

 

onMounted(() => {
    // 绑定上传事件
    const dropZone = document.getElementById('dropZone');
    const fileInput = document.getElementById('FileImage');
    const uploadButton = document.getElementById('Button_Upload');
    const urlInput = document.getElementById('ImageUrl');
    const urlButton = document.getElementById('Button_UploadUrl');

    // 点击上传
    uploadButton.addEventListener('click', () => {
        if (fileInput.files.length === 0) {
            alert('请先选择图片');
            return;
        }
        uploadFile(fileInput.files[0]);
        fileInput.value = '';
    });

    // 拖放上传
    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('dragover');
    });

    dropZone.addEventListener('dragleave', (e) => {
        e.preventDefault();
        dropZone.classList.remove('dragover');
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('dragover');
        const file = e.dataTransfer.files[0];
        if (file) {
            uploadFile(file);
        } else {
            alert('请拖入图片文件');
        }
    });

    // URL上传
    urlButton.addEventListener('click', async () => {
        const imageUrl = urlInput.value.trim();
        if (!imageUrl) {
            alert('请输入图片链接');
            return;
        }

        try {
            const response = await fetch(imageUrl);
            if (!response.ok) throw new Error('获取图片失败');
            const blob = await response.blob();
            const file = new File([blob], 'image_from_url.jpg', {
                type: blob.type || 'image/jpeg'
            });
            await uploadFile(file);
            urlInput.value = '';
        } catch (err) {
            alert('无法下载图片，请检查链接或跨域策略');
            urlInput.value = '';
        }
    });
});

 

vue与html + javascript代码相似。懂得语法与规范即可。