input 上传图片如何不通过blob获取到图片的宽高？-灵析社区

由于内容安全策略（Content Security Policy, CSP）的限制，直接使用 `blob:` URL 可能会遇到问题。不过，你可以通过创建一个 `FileReader` 来读取文件，然后使用 `createObjectURL` 创建一个 `ObjectURL`，这样可以避免直接使用 `blob:` URL。以下是如何实现这一点的示例代码： javascript function getImageSize(file, callback) { // 使用FileReader读取文件 var reader = new FileReader(); reader.onload = function(e) { // 创建一个Image对象 var img = new Image(); img.onload = function() { // 当图片加载完成后，可以获取宽高 var width = img.width; var height = img.height; // 执行回调函数，并传入宽高 callback(width, height); // 释放Image对象 img = null; }; // 设置Image的src为读取到的数据 img.src = e.target.result; }; // 以DataURL的形式读取文件 reader.readAsDataURL(file); } // 使用示例 var inputElement = document.querySelector('input[type="file"]'); inputElement.addEventListener('change', function(event) { var file = event.target.files[0]; if (file) { getImageSize(file, function(width, height) { console.log('图片宽：' + width + '，图片高：' + height); // 在这里判断宽高是否符合要求，然后决定是否上传 }); } }); 在这个例子中，`FileReader` 用于将文件读取为 Data URL，这是一种将文件嵌入到代码中的方法，它通常不会违反 CSP 的 `img-src` 指令。Data URL 是一种特殊格式的 URL，它将文件内容直接编码在 URL 中。 注意，使用 Data URLs 可能会增加内存的使用，因为整个文件内容都会被编码到字符串中。对于大文件，这可能会成为一个问题。 确保在使用此方法时，你的 CSP 允许 `data:` 作为 `img-src` 的源。如果 CSP 仍然不允许，你可能需要调整你的 CSP 设置，或者考虑将图片上传到服务器，然后在服务器端获取图片的尺寸信息。