webuploader 结合 element ui
时间: 2023-10-31 18:06:09 浏览: 56
可以使用 element-ui 的 el-upload 组件来实现 webuploader 的功能。具体步骤如下:
1. 安装 webuploader 和 element-ui:
```
npm install webuploader element-ui --save
```
2. 在需要使用上传组件的页面中引入 webuploader 和 element-ui:
```javascript
import WebUploader from 'webuploader';
import { Upload, Button } from 'element-ui';
```
3. 在页面中使用 el-upload 组件:
```html
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
:before-upload="beforeUpload"
:file-list="fileList"
:auto-upload="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>
```
4. 在页面中定义上传相关的方法:
```javascript
export default {
data() {
return {
fileList: []
};
},
methods: {
handleSuccess(response, file, fileList) {
console.log(response);
},
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
submitUpload() {
this.$refs.upload.submit();
}
}
};
```