export function convertRes2Blob(response,exportFileName) { // try { const fileName = response.headers['content-disposition']?.match(/filename=(.*)/)[1] ?? exportFileName // 将二进制流转为blob const blob = new Blob([response.data], { type: 'application/octet-stream' }) if (typeof window.navigator.msSaveBlob !== 'undefined') { // 兼容IE，window.navigator.msSaveBlob：以本地方式保存文件 window.navigator.msSaveBlob(blob, decodeURI(fileName)) } else { // 创建新的URL并指向File对象或者Blob对象的地址 const blobURL = window.URL.createObjectURL(blob) // 创建a标签，用于跳转至下载链接 const tempLink = document.createElement('a') tempLink.style.display = 'none' tempLink.href = blobURL tempLink.setAttribute('download', decodeURI(fileName)) // 兼容：某些浏览器不支持HTML5的download属性 if (typeof tempLink.download === 'undefined') { tempLink.setAttribute('target', '_blank') } // 挂载a标签 document.body.appendChild(tempLink) tempLink.click() document.body.removeChild(tempLink) // 释放blob URL地址 window.URL.revokeObjectURL(blobURL) } message.success("已导出"); // } // catch (error) { // message.warning("导出异常，请重新尝试"); // } } 导出报Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'content-disposition'是因为什么原因

这个错误通常是因为响应头中不存在 "content-disposition" 属性。在你的代码中，你尝试使用 response.headers['content-disposition'] 获取文件名，然而如果响应头中没有这个属性，则会返回 undefined，导致你在尝试使用 undefined.match(/filename=(.*)/)[1] 访问一个不存在的属性，从而导致这个错误。

为了避免这个问题，你可以在读取 response.headers['content-disposition'] 之前先检查一下这个属性是否存在，例如：

const fileName = (response.headers['content-disposition'] && response.headers['content-disposition'].match(/filename=(.*)/)[1]) || exportFileName;

这样，如果响应头中不存在 "content-disposition" 属性，fileName 将会默认使用传入的 exportFileName。

相关问题

private async parseMaterial(osgStateSet: any) { let material = new THREE.MeshBasicMaterial({ // side: THREE.DoubleSide, }); //THREE.FrontSide 背面 // THREE.BackSide 前面 // THREE.DoubleSide 双面 let osgImage = osgStateSet.TextureAttributeList[0].value.StateAttribute.Image; // let texture = this.parseImage(osgImage); let fileName = osgImage.Name; const isJPEG = fileName.search(/.jpe?g($|?)/i) > 0; const isPNG = fileName.search(/.png($|?)/i) > 0; if (!isPNG && !isJPEG) { return; } let mimeType = isPNG ? 'image/png' : 'image/jpeg'; let imageUri: any = new Blob([osgImage.Data], { type: mimeType }); let base64 = await this.blobToBase64(imageUri); // debugger let imageUrl: any = URL.createObjectURL(imageUri); try { let texture = new THREE.TextureLoader().load(base64, () => { texture.needsUpdate = true; // texture.format = THREE.RGBAFormat; texture.type = THREE.UnsignedShort5551Type; texture.minFilter = THREE.LinearMipmapNearestFilter; texture.magFilter = THREE.LinearMipmapNearestFilter; texture.generateMipmaps = false; // texture.format = THREE.RGBAIntegerFormat; // texture.minFilter = THREE.NearestFilter; // texture.magFilter = THREE.NearestFilter; // texture.minFilter = THREE.LinearMipMapLinearFilter; // texture.magFilter = THREE.LinearFilter; // texture.wrapS = THREE.RepeatWrapping; // texture.wrapT = THREE.RepeatWrapping; // texture.anisotropy = 1; // texture.generateMipmaps = false; // texture.encoding = THREE.sRGBEncoding; }); imageUri = null; osgImage = null; imageUrl = null; if (texture) { material.map = texture; } } catch (e) { console.log('纹理加载出错', e); } osgStateSet = null; return material; } private blobToBase64(blob: any) { return new Promise((resolve, reject) => { const fileReader = new FileReader(); // readAsDataURL fileReader.readAsDataURL(blob); fileReader.onload = (e: any) => { resolve(e.target.result); }; }); }没有显示base64图片的纹理，也没有报错，请找出问题，并给出详细代码

在代码中，你使用了一个Blob对象来加载纹理图片，并将其转换成了base64编码，但是在加载纹理时，却直接使用了base64编码字符串来加载纹理，这个可能是导致问题的原因。正确的做法应该是使用图片的URL来加载纹理，而不是直接使用base64编码字符串。

具体修改代码如下：

private async parseMaterial(osgStateSet: any) {
    let material = new THREE.MeshBasicMaterial({
        // side: THREE.DoubleSide,
    });
    //THREE.FrontSide 背面
    // THREE.BackSide 前面
    // THREE.DoubleSide 双面

    let osgImage = osgStateSet.TextureAttributeList[0].value.StateAttribute.Image;
    // let texture = this.parseImage(osgImage);

    let fileName = osgImage.Name;
    const isJPEG = fileName.search(/.jpe?g($|?)/i) > 0;
    const isPNG = fileName.search(/.png($|?)/i) > 0;
    if (!isPNG && !isJPEG) {
        return;
    }
    let mimeType = isPNG ? 'image/png' : 'image/jpeg';
    let imageUri: any = new Blob([osgImage.Data], { type: mimeType });

    try {
        // 使用图片的URL来加载纹理
        let texture = await new Promise<THREE.Texture>((resolve) => {
            let imageUrl = URL.createObjectURL(imageUri);
            new THREE.TextureLoader().load(imageUrl, (texture) => {
                // 在加载完成的回调函数中，手动释放URL对象，避免内存泄漏问题
                URL.revokeObjectURL(imageUrl);
                texture.needsUpdate = true;
                // texture.format = THREE.RGBAFormat;
                texture.type = THREE.UnsignedShort5551Type;
                texture.minFilter = THREE.LinearMipmapNearestFilter;
                texture.magFilter = THREE.LinearMipmapNearestFilter;
                texture.generateMipmaps = false;
                // texture.format = THREE.RGBAIntegerFormat;
                // texture.minFilter = THREE.NearestFilter;
                // texture.magFilter = THREE.NearestFilter;
                // texture.minFilter = THREE.LinearMipMapLinearFilter;
                // texture.magFilter = THREE.LinearFilter;
                // texture.wrapS = THREE.RepeatWrapping;
                // texture.wrapT = THREE.RepeatWrapping;
                // texture.anisotropy = 1;
                // texture.generateMipmaps = false;
                // texture.encoding = THREE.sRGBEncoding;
                resolve(texture);
            });
        });

        if (texture) {
            material.map = texture;
        }
    } catch (e) {
        console.log('纹理加载出错', e);
    }
    osgStateSet = null;
    return material;
}

private blobToBase64(blob: any) {
    return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        // readAsDataURL
        fileReader.readAsDataURL(blob);
        fileReader.onload = (e: any) => {
            resolve(e.target.result);
        };
    });
}

其中，使用了一个Promise对象来等待纹理加载完成后返回，同时在加载完成的回调函数中，手动释放URL对象，避免内存泄漏问题。另外，建议在加载纹理时，设置合适的minFilter和magFilter，以获得更好的渲染效果。

uniapp 请求后台文件，后台设置HttpServletResponse 的header 为Content-Disposition:attachment;filename=1685698197979.jpg，Content-Type:application/octet-stream; charset=UTF-8,我在前端怎么接收这个图片并展示

你可以通过ajax请求后端接口，获取到图片数据后，将其转化为一个Blob对象，然后使用URL.createObjectURL方法将Blob对象转化为一个URL地址，最后将这个URL地址赋值给img元素的src属性即可展示这张图片。以下是示例代码：

// 发送ajax请求，获取图片数据
uni.request({
  url: 'your-backend-api-url',
  responseType: 'arraybuffer', // 指定返回的数据类型为二进制流
  success(res) {
    // 将二进制流转化为Blob对象
    const blob = new Blob([res.data], { type: 'application/octet-stream' })
    // 将Blob对象转化为URL地址
    const imgUrl = URL.createObjectURL(blob)
    // 将URL地址赋值给img元素的src属性
    document.querySelector('#img').src = imgUrl
  }
})

其中，#img是展示图片的img元素的选择器。注意，使用完URL.createObjectURL方法后，应该调用URL.revokeObjectURL方法来释放URL地址，避免内存泄漏。