一、上传文件的基本使用
el-uploaddata是基于element-ui所提供的上传文件组件,可以实现文件的选择、拖拽、上传等功能。下面是一个简单的示例:
<el-uploaddata
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-uploaddata>
其中,class="upload-demo"表示样式的类名,可以根据自己的需求进行定义;action属性是上传的地址;file-list属性是文件列表,我们需要定义一个data属性来存储,这样上传成功的文件就会添加到列表中;slot="tip"表示提示信息的插槽名称,这里的提示信息是自定义的。
可以看到,el-uploaddata提供了非常方便的上传文件功能,可以适应大多数场景。接下来我们将详细介绍它的各种使用方法。
二、多文件上传
有些情况下,我们需要同时上传多个文件。此时,我们可以添加multiple属性,然后修改之前的data属性为数组即可:
<el-uploaddata
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:file-list="fileList"
multiple>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-uploaddata>
三、限制上传的文件类型和大小
有些情况下,我们需要限制上传的文件类型、大小等。这里我们可以使用before-upload属性,来进行校验。我们可以定义一个函数,在上传之前对文件进行大小、类型等方面的判断,仅当满足条件时才允许上传。下面是一个例子:
<el-uploaddata
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:file-list="fileList"
:before-upload="beforeUpload">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-uploaddata>
然后我们需要定义一个beforeUpload方法:
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 或 PNG 格式');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB');
}
return isJPG && isLt2M;
}
在这个例子中,我们限制了上传的文件类型只能为JPG或PNG格式,并且文件大小不能超过2MB。如果上传的文件不符合条件,就会弹出提示信息。如果符合条件,就会返回true,然后进行上传操作。
四、拖拽上传
使用el-uploaddata,我们还可以通过drag属性,来实现拖拽上传。具体实现方法如下:
<el-uploaddata
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:file-list="fileList"
:drag="drag">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-uploaddata>
其中,i标签和div标签中的内容为拖拽上传时的界面,可以根据自己的需求进行修改。
五、图片预览
除了上传文件以外,el-uploaddata还提供了对上传图片的预览功能。我们只需要添加一个预览的插槽即可:
<el-uploaddata
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:file-list="fileList"
:on-preview="handlePictureCardPreview">
<i class="el-icon-plus"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过2MB</div>
<div v-if="dialogImageUrl" class="image-dialog">
<img :src="dialogImageUrl" alt="" />
</div>
</el-uploaddata>
然后再定义一个handlePictureCardPreview方法:
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
在这个例子中,我们添加了一个与el-uploaddata同级的div标签,用于存储图片预览的界面。预览的功能可以通过on-preview属性来实现,然后我们需要定义一个handlePictureCardPreview方法,在该方法中设置预览图片的地址和弹窗的可见性。
通过以上几个例子,我们可以看到el-uploaddata提供了丰富的上传文件的功能,不仅可以满足基本的上传需求,也可以通过一些属性和方法,灵活定制自己需要的功能。同时,element-ui的组件库也提供了其他一些上传文件相关的组件,如el-uploaddragger、el-upload、el-uploader等,可以根据自己的具体需求进行选择。