图片上传组件都有哪些 把这些组件写出代码展示
时间: 2023-08-18 13:58:37 浏览: 44
常见的图片上传组件有很多,以下是几个常用的示例:
1. Vue2-Dropzone: 一个基于 Vue.js 的可定制化的文件上传组件,支持图片拖拽、预览等功能。
```html
<template>
<div>
<vue2-dropzone @vdropzone-success="handleUpload"></vue2-dropzone>
</div>
</template>
<script>
import Vue2Dropzone from 'vue2-dropzone';
import 'vue2-dropzone/dist/vue2Dropzone.min.css';
export default {
components: {
Vue2Dropzone
},
methods: {
handleUpload(file) {
// 处理上传完成后的逻辑
console.log("上传完成", file);
}
}
}
</script>
```
2. Element UI 的 Upload 组件: Element UI 是一套基于 Vue.js 的桌面端组件库,其中的 Upload 组件可以用于文件上传,包括图片上传。
```html
<template>
<div>
<el-upload @success="handleUpload"></el-upload>
</div>
</template>
<script>
export default {
methods: {
handleUpload(file) {
// 处理上传完成后的逻辑
console.log("上传完成", file);
}
}
}
</script>
```
3. Vuetify 的 File Input 组件: Vuetify 是一个基于 Vue.js 的 Material Design 组件库,其中的 File Input 组件可以用于文件上传,包括图片上传。
```html
<template>
<div>
<v-file-input @change="handleUpload"></v-file-input>
</div>
</template>
<script>
export default {
methods: {
handleUpload(file) {
// 处理上传完成后的逻辑
console.log("上传完成", file);
}
}
}
</script>
```
这些示例展示了不同的图片上传组件,你可以根据自己的项目需求选择合适的组件,并根据组件提供的事件来处理上传完成后的逻辑。请确保已正确安装所需的组件库,并将其导入到你的 Vue 组件中。