antd vue 上传图片
时间: 2023-11-07 18:05:42 浏览: 91
Antd Vue 提供了一个 Upload 组件,可以用于上传图片。
使用方法如下:
1. 安装 antd-vue 和 axios:
```
npm install antd-vue axios --save
```
2. 引入 antd-vue 和 axios:
```js
import Vue from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import axios from 'axios'
Vue.use(Antd)
Vue.prototype.$axios = axios
```
3. 在组件中使用 Upload 组件:
```html
<template>
<div>
<a-upload
:action="uploadUrl"
:before-upload="beforeUpload"
:on-success="onSuccess"
:on-error="onError"
:show-upload-list="false"
>
<a-button>
<a-icon type="upload"></a-icon> Click to Upload
</a-button>
</a-upload>
</div>
</template>
<script>
export default {
data() {
return {
uploadUrl: '/api/upload',
}
},
methods: {
beforeUpload(file) {
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
if (!isJpgOrPng) {
this.$message.error('You can only upload JPG/PNG file!')
}
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
this.$message.error('Image must smaller than 2MB!')
}
return isJpgOrPng && isLt2M
},
onSuccess(response) {
this.$message.success('Upload success')
console.log(response)
},
onError(error) {
this.$message.error('Upload failed')
console.log(error)
},
},
}
</script>
```
上面的代码中,Upload 组件的 action 属性指定了上传图片的 URL,before-upload 属性用于校验上传的文件类型和大小,on-success 和 on-error 属性分别用于处理上传成功和上传失败的情况。
在 beforeUpload 方法中,我们校验了上传的文件类型和大小,如果不符合要求,则会弹出错误提示。
在 onSuccess 方法中,我们打印了上传成功后返回的数据,可以根据实际需求进行处理。
在 onError 方法中,我们打印了上传失败的错误信息,可以根据实际需求进行处理。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)