在搭建好的vue3中 使用vue-upload-component
时间: 2023-12-13 17:04:52 浏览: 67
要在搭建好的 Vue 3 项目中使用 vue-upload-component,需要以下步骤:
1. 在终端中进入项目目录,执行以下命令安装 vue-upload-component:
```
npm install vue-upload-component --save
```
2. 在需要使用上传组件的 Vue 组件中,引入 vue-upload-component:
```
<template>
<div>
<vue-upload-component></vue-upload-component>
</div>
</template>
<script>
import VueUploadComponent from 'vue-upload-component'
export default {
components: {
VueUploadComponent
}
}
</script>
```
3. 在组件中使用 vue-upload-component 的 props 和事件,例如:
```
<vue-upload-component
accept="image/*"
@upload-success="onUploadSuccess"
@upload-error="onUploadError"
></vue-upload-component>
<script>
export default {
methods: {
onUploadSuccess (response, file, fileList) {
console.log('upload success', response, file, fileList)
},
onUploadError (error, response, file) {
console.log('upload error', error, response, file)
}
}
}
</script>
```
这样,你就可以在 Vue 3 项目中使用 vue-upload-component 这个上传组件了。注意要按照组件的 API 使用相应的 props 和事件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)