element图片上传功能
时间: 2023-04-12 22:01:04 浏览: 123
vue+element实现图片上传及裁剪功能
可以使用HTML5的File API来实现element图片上传功能。具体实现可以参考以下代码:
HTML部分:
```
<template>
<div>
<el-upload
class="upload-demo"
action="/upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="beforeUpload"
:file-list="fileList"
:auto-upload="false"
list-type="picture-card">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
```
JS部分:
```
<script>
export default {
data() {
return {
dialogImageUrl: '',
dialogVisible: false,
fileList: []
};
},
methods: {
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
beforeUpload(file) {
this.fileList.push(file);
return false;
}
}
};
</script>
```
这段代码使用了element-ui的Upload组件,通过设置action属性指定上传的地址,通过设置before-upload属性来实现手动上传,通过设置on-preview属性和on-remove属性来实现预览和删除功能。
阅读全文