Vue.js+Flask搜索DOCX结果：PC Chrome正常，安卓Chrome等浏览器异常

我正在开发一个基于Vue.js的网站，通过前端向Flask后端发送查询请求，搜索多个DOCX文档中的数据，并在页面展示匹配到的文本和图片。目前遇到的问题：

• PC端Chrome浏览器可正常运行
• 安卓端Chrome、Opera、Edge浏览器无法正常工作
• PC和安卓端Firefox浏览器均能正常运行（当前处于开发模式）

已执行的排查与尝试：

• 清除安卓端浏览数据
• 适配不同屏幕尺寸的CSS
• 重写extract_content()函数及search.vue的脚本

经排查确认后端能正常接收请求，但通过打印变量发现extract_content()函数中图片丢失，尝试多种图片提取方法仍未解决。

相关代码 #

1. 前端search.vue文件（模板与脚本） #

<template>
  <div>
    <ul v-if="searchResults.length">
      <li v-for="(result, index) in searchResults" :key="`result-${index}`">
        {{ result.filename }}
        <p v-for="(text, textIndex) in result.text" :key="`text-${index}-${textIndex}`">{{ text }}</p>
        <img 
          v-for="(image, imageIndex) in result.images" 
          :src="`/static/extracted_images/${image}`" 
          :alt="`Image ${imageIndex}`"
          :key="`image-${index}-${imageIndex}`" >
      </li>
    </ul>
  </div>
</template>


<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchResults: [],
    };
  },
  watch: {
    '$route.query.q': {
      immediate: true,
      handler(newQuery) {
        this.query = newQuery || '';
        this.fetchSearchResults();
      },
    },
  },
  methods: {
    fetchSearchResults() {
  axios.get(`${process.env.VUE_APP_BACKEND_URL}/api/search`, { params: { query: this.query } })
    .then(response => {
      this.searchResults = response.data;
    })
    .catch(error => {
      console.error('Error fetching search results:', error);
    });
}
  }
};
</script>

2. Flask后端/api/search路由代码 #

@app.route('/api/search')
def search():
    search_query = request.args.get('query', '')
    directory = r"C:/Users/ID/Desktop/App/uploads"
    search_results = search_documents(directory, search_query)
    return jsonify(search_results)

3. search_documents与extract_content函数代码 #

def search_documents(directory, id_str):
    results = []
    for filename in os.listdir(directory):
        if filename.endswith(".docx"):
            doc_path = os.path.join(directory, filename)
            extracted_data = extract_content(doc_path, id_str)

            # seperate text and images
            text = [item['content'] for item in extracted_data if item['type'] == 'text']
            images = [item['content'] for item in extracted_data if item['type'] == 'image']

            if text or images:  
                results.append({
                    'filename': filename,
                    'text': text,
                    'images': images
                })

    return results


def extract_content(doc_path, id_str):
    doc = Document(doc_path)
    extracted_data = []

    image_directory = r"C:/Users/ID/Desktop/vue.jsExample/Vue-3/MaidsPost/public/static/extracted_images"
    os.makedirs(image_directory, exist_ok=True)

    is_collecting = False

    #aquire texts
    for para in doc.paragraphs:
        text = para.text.strip()

        if id_str in text:
            is_collecting = True
        elif "extracted_time: " in text and is_collecting:
            is_collecting = False

        if is_collecting:
            extracted_data.append({'type': 'text', 'content': text})
        
        # aquire images
        if is_collecting:
            for run in para.runs:
                print(para.runs)
                for shape in run.element.iter():
                    if shape.tag.endswith('blip'):
                        image_rid = shape.attrib['{http://schemas.openxmlformats.org/officeDocument/2006/relationships}embed']
                        image_part = doc.part.related_parts[image_rid]
                        image_filename = f"extracted_image_{uuid.uuid4()}.png"
                        image_path = os.path.join(image_directory, image_filename)

                        with open(image_path, 'wb') as f:
                            f.write(image_part.blob)
                            extracted_data.append({'type': 'image', 'content': image_filename})
    
    return extracted_data

内容的提问来源于stack exchange，提问作者Ataibei