upload 上传是后端开发中非常常用的功能。 Vue开发中常用的Element组件库也提供了非常好用的上传组件。
基本用法
代码:
点击上传
不用说,:action是执行上传动作的后台socket,el-button是触发上传的按钮。
上传文件数
首先是设置是否可以同时选择多个文件上传。 这也是一个属性,添加多个即可。 另外,el-upload组件提供了:limit属性来设置可以上传的最大文件数。 超过此数量后,所选文件将不会上传。 :on-exceed 绑定的方式是处理超出数量后的动作。 代码如下所示:
点击上传
上传格式和大小限制
如果需要限制上传文件的格式,则需要添加accept属性。 这与直接使用的属性相同。 Accept属性的值可以是accept="image/gif、image/jpeg、text/plain、application/pdf"等。 文件格式提示elementui 上传头像,可以使用槽。 代码如下所示:
点击上传
请上传图片格式文件
请注意,这只是为了限制选择文件时的格式,尽管用户仍然可以单击“所有文件”选项上传其他格式。 如果上传时需要再次校准,则需要在:before-upload钩子中绑定相应的方法进行校准,代码如下:
点击上传
请上传图片格式文件
...
onBeforeUpload(file)
{
const isIMAGE = file.type === 'image/jpeg'||'image/gif'||'image/png';
const isLt1M = file.size / 1024 / 1024 < 1;
if (!isIMAGE) {
this.$message.error('上传文件只能是图片格式!');
}
if (!isLt1M) {
this.$message.error('上传文件大小不能超过 1MB!');
}
return isIMAGE && isLt1M;
}
在限制文件格式的同时,这里也对文件大小进行了校准。
上传过程中的各种hook
下面是官网直传的说明,如图:
显示已上传文件的列表
这个功能可以说是非常强大了。 可以清晰显示已上传文件列表,并可以方便删除上传新文件。
代码:
点击上传
请上传图片格式文件
实现方法是:添加属性file-list="files",其中files为绑定的字段对象,初始为空。
疗效如右图:
上传时提交数据
上传文件时elementui 上传头像,需要同时向后台socket提交数据。 这时候就用到了:data属性。
点击上传
请上传图片格式文件
...
uploadData: {
dataType: "0",
oldFilePath:""
}
选择和上传是分开处理的
有时我们需要单独处理选择和上传。 例如上传图片,先选择文件提交给后端,图片处理完后再提交base64内容给后端。
代码如下所示:
选取
上传
只能上传jpg/png文件,且不能超过1m
...
submitUpload()
{
console.log("submit")
},
onUploadChange(file)
{
const isIMAGE = (file.raw.type === 'image/jpeg' || file.raw.type === 'image/png');
const isLt1M = file.size / 1024 / 1024 < 1;
if (!isIMAGE) {
this.$message.error('只能上传jpg/png图片!');
return false;
}
if (!isLt1M) {
this.$message.error('上传文件大小不能超过 1MB!');
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file.raw);
reader.onload = function(e){
console.log(this.result)//图片的base64数据
}
}
疗效如图:
发表评论