vue实现粘贴上传图片

<template>

    <el-input v-model="data.pastData" @paste="pastPic"
        @input="data.pastData = ''" placeholder="粘贴图片" ></el-input>

</template>


<script setup>
import { reactive } from "vue"
// 整个页面的数据
let data= reactive({
    pastData: '',
});



// 上传图片
const uploadPaste = (file, url, cb, errCb) => {
    let token = localStorage.getItem("token");
    const xhr = new XMLHttpRequest();
    const formData = new FormData();
    formData.append('file', file); // 假设后端接收的字段名为'image'  
    // 设置请求类型、URL和异步标志  
    xhr.open('POST', url, true);
    // 设置请求头（通常FormData请求不需要手动设置Content-Type）  
    // xhr.setRequestHeader('Content-Type', 'multipart/form-data'); // 通常不需要，因为FormData会自动设置  
    // 定义请求完成时的回调函数  
    xhr.onload = function () {
        if (xhr.status === 200) {
            // 请求成功  
            const responseData = JSON.parse(xhr.responseText);
            cb(responseData);
        } else {
            // 请求失败  
            console.error('Error:', xhr.statusText);
            errCb();
        }
    };

    // 定义请求出错时的回调函数  
    xhr.onerror = function () {
        console.error('Network Error');
        errCb()
    };
    xhr.setRequestHeader("token", `${token}`); // 设置 token
    // 发送请求  
    xhr.send(formData);
}
// 粘贴识别图片
const pastPic = async (e) => {
    let items = (e.clipboardData || e.originalEvent.clipboardData).items;
    for (var i = 0; i < items.length; i++) {
        if (items[i].type.indexOf('image') !== -1) {
            //只过滤出粘贴的图片
            formList.loading = true;
            try {
                var blob = items[i].getAsFile();
                //调用接口
                uploadPaste(blob, 'http://xxxxx/upload', (res) => {
                    //接口返回成功
                    console.log(res);
                }, () => {
                    //接口返回失败
                    // formList.loading = false;
                    console.log('error');
                });
            } catch (error) {
                console.log(error);
                
            }
        }
    }
}


</script>
<style scoped >
</style>