Vue前端上
传组件可以使用第三方库如`element-ui`的`el-upload`组件来实现上
传图片和视频的功能。
首先，需要在
Vue项目中引入`element-ui`库：
```javascript
import
Vue from '
vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
```
然后，在需要使用上
传组件的页面中，可以使用`el-upload`组件来实现上
传图片和视频的功能。以下是一个示例：
```html
<template>
<div>
<el-upload
class="upload-demo"
action="/upload"
:before-upload="beforeUpload"
:on-success="handleSuccess"
:on-error="handleError"
:file-list="fileList"
:accept="'image/*,video/*'"
>
<el-button size="small" type="primary">点击上
传</el-button>
<div slot="tip" class="el-upload__tip">只能上
传图片或视频</div>
</el-upload>
</div>
</template>
<script>
export default {
data() {
return {
fileList: []
}
},
methods: {
beforeUpload(file) {
const isImage = file.type.indexOf('image') !== -1
const isVideo = file.type.indexOf('video') !== -1
const isLt2M = file.size / 1024 / 1024 < 2
if (!isImage && !isVideo) {
this.$message.error('请选择
图片或视频文件')
return false
}
if (!isLt2M) {
this.$message.error('上
传文件大小不能超过 2MB')
return false
}
},
handleSuccess(response, file, fileList) {
console.log(response, file, fileList)
this.fileList = fileList.slice(-1)
},
handleError(error, file, fileList) {
console.log(error, file, fileList)
this.$message.error('上
传失败')
}
}
}
</script>
```
其中，`el-upload`组件的`accept`属性可以用来限制上
传文件的类型，本示例中使用`image/*,video/*`表示只允许上
传图片或视频文件；`beforeUpload`方法用来在上
传前进行文件类型和大小的校验；`handleSuccess`和`handleError`方法分别用来处理上
传成功和失败的情况。
需要注意的是，上
传文件的具体实现需要在后端服务器中完成。在本示例中，`action`属性指定了上
传文件的后端接口地址为`/upload`，具体实现需要后端开发人员完成。
最低0.47元/天 解锁文章
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
