vue url下载图片跨域
时间: 2023-09-23 17:02:52 浏览: 55
在Vue中,要实现跨域下载图片,可以使用以下方法:
1. 首先,你需要在Vue组件中引入axios库。可以在`<script>`标签中添加以下代码:
```javascript
import axios from 'axios'
```
2. 接下来,你可以在Vue组件中定义一个方法来处理图片下载。例如,你可以创建一个名为`downloadImage`的方法,并传入图片的URL和文件名作为参数:
```javascript
methods: {
downloadImage(imgUrl, fileName) {
axios.get(imgUrl, { responseType: 'blob' })
.then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]))
const link = document.createElement('a')
link.href = url
link.setAttribute('download', fileName || 'image')
document.body.appendChild(link)
link.click()
})
.catch(error => {
console.error(error)
})
}
}
```
3. 最后,在Vue模板中,你可以通过点击事件调用`downloadImage`方法来下载图片。例如,你可以在一个按钮上绑定点击事件,并传入图片的URL和文件名:
```html
<el-button type="primary" @click="downloadImage('http://example.com/image.jpg', 'photo.jpg')">下载图片</el-button>
```
以上代码将会通过axios库发送一个GET请求来获取图片的二进制数据,并创建一个URL对象来生成下载链接。然后,创建一个`<a>`标签,并将生成的URL设置为`href`属性。最后,模拟点击`<a>`标签来触发下载操作。
请注意,以上代码是基于Vue和axios的实现方式。确保在使用前安装并导入axios库。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue下载图片常见问题,解决vue中下载同源图片、跨域图片,以及打包下载多个跨域图片](https://blog.csdn.net/m0_50744582/article/details/127930626)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatgptT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]