vue+elementUI文件上传

在Vue中如何使用ElementUI实现文件上传？

你可以使用ElementUI中的Upload组件来实现文件上传。首先需要在项目中引入ElementUI，然后在Vue组件中进行如下操作：

1. 在template中使用Upload组件，比如：

<el-upload
class="upload-demo"
action="your upload url"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="beforeUpload">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

2. 在script中定义上传前、上传后和文件删除时的一些操作，比如：

methods: {
handlePreview(file) {
console.log('文件地址：', file.url);
},
handleRemove(file, fileList) {
console.log('删除成功');
},
beforeUpload(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;
}
}

这样你就可以在Vue中使用ElementUI的Upload组件实现文件上传了。