了解之前，先看看这篇《实现MultipartStreamProvider经Web API上传文档或图片》https://www.cnblogs.com/insus/p/22954598
然后在其基础上，修改。
浏览效果如下，拖放，选择上传或者粘贴图片链接上传。有关图片链接上传，需要处理跨域，如果服务器允许 CORS。将响应转换为 Blob，再包装成 File 对象。
html markup
<div> <div id="dropZone" class="drop-zone"> <p>将图片拖到此处，或</p> <input id="FileImage" type="file" accept="image/jpg,image/jpeg,image/png,image/tiff" /> <input id="Button_Upload" type="button" value="上传" /> <br /> <br /> <label>或输入图片链接：</label> <input id="ImageUrl" type="text" /> <input id="Button_UploadUrl" type="button" value="上传链接" /> </div> </div>
View Code
css style，
<style> .drop-zone { border: 2px dashed #ccc; border-radius: 10px; margin: 25px; padding: 30px; text-align: center; background-color: #fafafa; transition: all 0.3s; } .drop-zone.dragover { border-color: #409eff; background-color: #ecf5ff; } </style>
View Code
跨域设置：
const acao = 'http://localhost:54522';
javascript代码，上传核心方法：
在html markup中，有设定5个id，在javascript中找到它们。
const dropZone = document.getElementById('dropZone');
const fileInput = document.getElementById('FileImage');
const uploadButton = document.getElementById('BtnUpload');
const urlInput = document.getElementById('ImageUrl');
const urlButton = document.getElementById('BtnUploadUrl');
// 点击上传按钮 uploadButton.addEventListener('click', () => { if (fileInput.files.length === 0) { alert('请先选择图片'); return; } uploadFile(fileInput.files[0]); });
View Code
// 拖放处理 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('请拖入图片文件'); } });
View Code
urlButton.addEventListener('click', async () => {
const imageUrl = urlInput.value.trim();
if (!imageUrl) {
alert('请输入图片链接');
return;
}
try {
const response = await fetch(imageUrl, { mode: 'cors' });
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' });
uploadFile(file);
urlInput.value = '';
} catch (err) {
alert('无法下载图片，请检查链接或跨域策略');
urlInput.value = '';
}
});
View Code
链接上传，附加辅助功能。
本随笔，着重演示拖放上传功能，替代传统选择文件，点上传。产生效益与效率。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。