在
使用vue和
element-
ui制作
上传文件的效果
时，可以按照以下步骤进行：
1. 安装
element-
ui：在终端
中使用npm或yarn进行安装，例如：npm install
element-
ui --save。
2. 在
vue组件
中引入
element-
ui的
上传组件：在需要
使用上传功能的组件
中，
使用import引入
element-
ui的
上传组件，例如：
```
<template>
<div>
<el-
upload
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-
upload="before
Upload"
:file-list="fileList"
multiple
list-type="picture"
:auto-
upload="false"
:on-success="handle
UploadSuccess"
:on-error="handle
UploadError">
<el-button size="small" type="primary">点击
上传</el-button>
<div slot="tip" class="el-
upload__tip">只能
上传jpg/png
文件，且不超过500kb</div>
</el-
upload>
</div>
</template>
<script>
import {
Upload, Button } from '
element-
ui';
export default {
components: {
'el-
upload':
Upload,
'el-button': Button
},
data() {
return {
fileList: []
};
},
methods: {
handlePreview(file) {
console.log('preview', file);
},
handleRemove(file) {
console.log('remove', file);
},
before
Upload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt500k = file.size / 1024 < 500;
if (!isJPG) {
this.$message.error('只能
上传jpg/png
文件');
}
if (!isLt500k) {
this.$message.error('
文件大小不能超过500kb');
}
return isJPG && isLt500k;
},
handle
UploadSuccess(response, file, fileList) {
console.log('success', response, file, fileList);
},
handle
UploadError(error, file, fileList) {
console.log('error', error, file, fileList);
}
}
};
</script>
```
3. 配置
上传组件的属性和方法：在引入
上传组件后，需要根据实际需求进行配置，例如：设置
上传的地址、
文件大小限制、
文件类型限制、
上传前的校验、
上传成功和失败的回调函数等。
4. 在模板
中使用上传组件：在组件的模板
中使用上传组件，并将需要
上传的
文件绑定到fileList属性上，例如：`:file-list="fileList"`。
5. 样式美化：根据实际需求对
上传组件的样式进行美化，例如：设置
上传按钮的颜色、设置
文件列表的样式等。
通过以上步骤，就可以在
vue项目
中使用element-
ui制作
上传文件的效果了。
2689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
