vue3 里怎么使用vue-upload-component
时间: 2023-12-08 15:04:12 浏览: 90
在Vue 3中使用vue-upload-component需要先安装该组件。可以使用npm或yarn进行安装:
```
npm install vue-upload-component --save
```
或者
```
yarn add vue-upload-component
```
安装完成后,在Vue组件中使用该组件,需要先引入:
```javascript
import vueUploadComponent from 'vue-upload-component'
```
然后在组件的`template`中使用:
```html
<template>
<div>
<vue-upload-component ref="upload" @input="onFileChange" :url="uploadUrl" :accepted-file-types="['image/jpeg', 'image/png']" :max-file-size="1024 * 1024 * 5" />
</div>
</template>
```
在这个例子中,我们为`vue-upload-component`传递了`ref`属性,这样我们就可以在组件的方法中通过`this.$refs.upload`来引用这个组件。我们也传递了`@input`属性,这个属性告诉组件在用户选中文件时调用`onFileChange`方法。我们还传递了`url`属性,这个属性告诉组件文件上传的地址。最后,我们传递了`accepted-file-types`和`max-file-size`属性,这些属性可以让我们限制上传文件的类型和大小。
在组件的`script`部分,我们需要定义`onFileChange`方法:
```javascript
<script>
import vueUploadComponent from 'vue-upload-component'
export default {
name: 'MyComponent',
components: {
vueUploadComponent
},
data() {
return {
uploadUrl: 'http://example.com/upload'
}
},
methods: {
onFileChange(file) {
console.log(file)
}
}
}
</script>
```
在这个例子中,我们定义了`onFileChange`方法,这个方法会在用户选择文件时被调用。在这个方法中,我们可以处理上传的文件。这里的`file`参数是一个包含了文件信息的对象。