增加粘贴URL地址

[SokWith]

这个帖子 cf-pages/Telegraph-Image#141 (comment) 的需求，
向bing要的代码：

handlePaste(event) {
    if (this.uploadMethod !== 'paste') {
        return;
    }
    const items = event.clipboardData.items;
    for (let i = 0; i < items.length; i++) {
        if (items[i].kind === 'file') {
            const file = items[i].getAsFile();
            // 判断文件类型是否为图片或视频
            if (file.type.includes('image') || file.type.includes('video')) {
                file.uid = Date.now() + i;
                file.file = file;
                console.log(file);
                if (this.beforeUpload(file)) {
                    this.uploadFile({
                        file: file,
                        onProgress: (evt) => this.handleProgress(evt),
                        onSuccess: (response, file) => this.handleSuccess(response, file),
                        onError: (error, file) => this.handleError(error, file)
                    });
                }
            } else {
                this.$message({
                    type: 'warning',
                    message: '粘贴板中的文件不是图片或视频'
                });
            }
        } else if (items[i].kind === 'string') {
            items[i].getAsString((text) => {
                const urlPattern = /^(https?:\/\/[^\s$.?#].[^\s]*)$/;
                if (urlPattern.test(text)) {
                    fetch(text)
                        .then(response => {
                            const contentType = response.headers.get('content-type');
                            if (response.ok && (contentType.includes('image') || contentType.includes('video'))) {
                                return response.blob();
                            } else {
                                throw new Error('URL地址的内容不是图片或视频');
                            }
                        })
                        .then(blob => {
                            const file = new File([blob], 'pasted-file', { type: blob.type });
                            file.uid = Date.now() + i;
                            file.file = file;
                            console.log(file);
                            if (this.beforeUpload(file)) {
                                this.uploadFile({
                                    file: file,
                                    onProgress: (evt) => this.handleProgress(evt),
                                    onSuccess: (response, file) => this.handleSuccess(response, file),
                                    onError: (error, file) => this.handleError(error, file)
                                });
                            }
                        })
                        .catch(error => {
                            this.$message({
                                type: 'warning',
                                message: '粘贴板中的URL地址的内容不是图片或视频'
                            });
                        });
                }
            });
        }
    }
},

[MarSeventh]

感谢提供代码，现已支持url粘贴上传。
因为前端直接fetch图片会出现跨域问题，因此我在后端增加了一个接口进行请求的中转。

[SokWith]

辛苦了。谢谢。
但似乎新版本粘贴框没有反应了

[MarSeventh]

辛苦了。谢谢。 但似乎新版本粘贴框没有反应了

没反应是指？获取图片内容需要时间，我这边测试粘贴图片和URL都正常。
记得同步更新后端。

[SokWith]

辛苦了。谢谢。 但似乎新版本粘贴框没有反应了

没反应是指？获取图片内容需要时间，我这边测试粘贴图片和URL都正常。 记得同步更新后端。

我也用的你的测试站点，点击粘贴框没有反应，不像上传框有变色提醒

[MarSeventh]

这个呀😂
因为一些原因，我禁用了鼠标点击事件，只需要获得焦点后直接粘贴上传即可。

[SokWith]

这个呀😂 因为一些原因，我禁用了鼠标点击事件，只需要获得焦点后直接粘贴上传即可。

就是切换到粘贴界面后鼠标移动到框内自动吗？好像也没反应

原来是ctrl-v哈，粗心了

[MarSeventh]

这个呀😂 因为一些原因，我禁用了鼠标点击事件，只需要获得焦点后直接粘贴上传即可。

就是切换到粘贴界面后鼠标移动到框内自动吗？好像也没反应

原来是ctrl-v哈，粗心了

切换后点击粘贴框，让它获得焦点，然后ctrl-v即可，目前的逻辑是这样的，和原项目的操作方式有点像。

[SokWith]

这个呀😂 因为一些原因，我禁用了鼠标点击事件，只需要获得焦点后直接粘贴上传即可。

就是切换到粘贴界面后鼠标移动到框内自动吗？好像也没反应
原来是ctrl-v哈，粗心了

切换后点击粘贴框，让它获得焦点，然后ctrl-v即可，目前的逻辑是这样的，和原项目的操作方式有点像。

还是希望增加鼠标点击动作，有利于移动设备操作。毕竟相对于原项目，是把粘贴分开了的，粘贴的目的性更强烈一些，误操作就更少些。

[MarSeventh]

移动设备不能使用粘贴上传吧，您指的是？
问题在于如果不禁止点击事件的话，点击上传框会跳出选择文件的页面，这样一来会误导用户，二来两种上传模式的区分也不够明晰。

[MarSeventh]

移动设备不能使用粘贴上传吧，您指的是？

点击拖拽模式下鼠标点击动作正常，可以直接点击

[SokWith]

移动设备不能使用粘贴上传吧，您指的是？ 问题在于如果不禁止点击事件的话，点击上传框会跳出选择文件的页面，这样一来会误导用户，二来两种上传模式的区分也不够明晰。

不是的，本想在粘贴模式下有鼠标点击启动粘贴功能。
折腾了一下，发现是现代浏览器不支持这样的动作，避免网站无意间读取用户粘贴板的隐私隐患。