在
使用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="fil
eList"
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 {
fil
eList: []
};
},
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, fil
eList) {
console.log('success', response, file, fil
eList);
},
handle
UploadError(error, file, fil
eList) {
console.log('error', error, file, fil
eList);
}
}
};
</script>
```
3. 配置
上传组件的属性和方法：在引入
上传组件后，需要根据实际需求进行配置，例如：设置
上传的地址、文件大小限制、文件类型限制、
上传前的校验、
上传成功和失败的回调函数等。
4. 在模板中
使用上传组件：在组件的模板中
使用上传组件，并将需要
上传的文件绑定到fil
eList属性上，例如：`:file-list="fil
eList"`。
5. 样式美化：根据实际需求对
上传组件的样式进行美化，例如：设置
上传按钮的颜色、设置文件列表的样式等。
通过以上步骤，就可以在
vue项目中
使用element-
ui制作
上传文件的效果了。
608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
