vue3 后台返回的图片链接如何查看与下载

最新推荐文章于 2025-04-19 10:59:33 发布

原创

最新推荐文章于 2025-04-19 10:59:33 发布

· 722 阅读

0 ·

版权

文章标签：

#javascript #开发语言 #ecmascript

本文介绍在Vue3应用中如何处理后台返回的图片链接，包括如何方便地查看这些图片以及实现图片的下载功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.查看

<a-table
                :columns="applyColumns"
                :data-source="uploadFile"
                :pagination="false"
            >
              <template #bodyCell="{ column,record }">
                <template v-if="column.key === 'operation'">
                  <a :href="record.enclosure" target="_blank">查看</a>
                  <a-divider type="vertical" />
                  <a @click="handleDownload(record.enclosure,record.name)">下载</a>
                </template>
              </template>
            </a-table>

2.下载

const handleDownload = (imgsrc, name) => {
        //下载图片地址和图片名
        let image = new Image()
        // 解决跨域 Canvas 污染问题
        image.setAttribute('crossOrigi