vue实现文件上传样式
时间: 2023-11-20 18:50:00 浏览: 40
可以使用第三方库element-ui中的el-upload组件来实现文件上传样式。具体实现步骤如下:
1. 安装element-ui库:npm install element-ui -S
2. 在main.js中引入element-ui:import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);
3. 在需要使用上传组件的页面中,使用el-upload标签,并设置相关属性,例如:
```
<el-upload
class="upload-demo"
action="/upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="beforeUpload"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
```
其中,class属性可以自定义样式,action属性指定上传文件的地址,on-preview、on-remove、before-upload属性分别对应文件预览、删除和上传前的回调函数,file-list属性绑定已上传的文件列表,slot="tip"用于设置提示信息。
4. 在样式文件中定义自定义样式,例如:
```
.upload-demo {
border: 1px dashed #409EFF;
border-radius: 6px;
padding: 20px 0;
text-align: center;
}
.upload-demo .el-upload {
display: inline-block;
margin-bottom: 0;
}
.upload-demo .el-upload__tip {
margin-top: 10px;
color: #999;
font-size: 12px;
}
```