vue-upload-component插件对比elementui的图片上传的好处与差别
时间: 2024-06-10 15:10:49 浏览: 6
Vue-upload-component和ElementUI都是Vue.js的UI组件库,都提供了图片上传组件。它们之间的区别如下:
优点:
Vue-upload-component:
1. 支持多文件上传和拖拽上传;
2. 可以方便地自定义上传请求和参数;
3. 可以设置上传前的验证规则;
4. 可以实时预览和删除已上传的图片。
ElementUI:
1. 集成了图片裁剪功能;
2. 支持图片上传前的预览;
3. 可以设置图片上传的大小和格式限制;
4. 可以自定义上传请求头和参数。
缺点:
Vue-upload-component:
1. 需要手动引入样式文件;
2. 不支持图片裁剪功能。
ElementUI:
1. 不能直接设置上传请求头;
2. 不能自定义上传请求方法。
综上所述,Vue-upload-component适合对上传组件有更高度自定义要求的开发者,而ElementUI则适合快速搭建一个简单的图片上传组件。
相关问题
vue-upload-component 多文件上传,图片预览代码示例
好的,以下是一个基于vue-upload-component实现的多文件上传和图片预览的代码示例:
```html
<template>
<div>
<vue-upload-component
@upload-success="uploadSuccess"
:multiple="true"
:preview="true"
accept="image/*"
>
<button>选择文件</button>
</vue-upload-component>
<div v-for="(file, index) in uploadedFiles" :key="index">
<img :src="file.url" alt="preview image" />
<p>{{ file.name }}</p>
</div>
</div>
</template>
<script>
import VueUploadComponent from "vue-upload-component";
export default {
components: {
VueUploadComponent,
},
data() {
return {
uploadedFiles: [],
};
},
methods: {
uploadSuccess: function (file, response) {
this.uploadedFiles.push({
name: file.name,
url: URL.createObjectURL(file.raw),
});
},
},
};
</script>
```
在上述代码中,我们使用了vue-upload-component插件来实现文件上传和图片预览的功能。其中,我们设置了`multiple`属性为`true`,表示支持多文件上传;设置了`preview`属性为`true`,表示支持文件预览;设置了`accept`属性为`image/*`,表示仅支持上传图片文件。
在模板中,我们使用了`<vue-upload-component>`组件来渲染上传按钮,当用户选择文件后,该组件会触发`upload-success`事件,并将上传成功后的文件对象和响应数据作为参数传递给回调函数`uploadSuccess`。在该回调函数中,我们将上传成功的文件对象保存到`uploadedFiles`数组中,并使用`URL.createObjectURL`方法生成图片文件的预览URL。
最后,我们使用`v-for`指令遍历`uploadedFiles`数组,并使用`<img>`标签和`<p>`标签来展示每个文件的预览图和文件名。
帮我写一段基于vue-upload-component 和ElementUi 封装 uploader-file标签的代码
好的,以下是基于 vue-upload-component 和 ElementUi 封装 uploader-file 标签的代码:
<template>
<div>
<el-upload
class="upload-demo"
:action="uploadUrl"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:file-list="fileList"
:auto-upload="false"
:show-file-list="false"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</div>
</template>
<script>
import { Upload } from 'vue-upload-component'
import { Message } from 'element-ui'
export default {
components: {
Upload
},
data() {
return {
uploadUrl: 'your-upload-url',
fileList: []
}
},
methods: {
handleSuccess(response, file, fileList) {
Message.success('上传成功')
console.log(response, file, fileList)
},
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
const isLt500K = file.size / 1024 < 500
if (!isJPG) {
Message.error('上传图片只能是 JPG/PNG 格式!')
}
if (!isLt500K) {
Message.error('上传图片大小不能超过 500KB!')
}
return isJPG && isLt500K
},
submitUpload() {
this.$refs.upload.submit()
}
}
}
</script>
相关推荐
![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_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)