一、el-upload上传视频后点击删除
el-upload组件是element-ui提供的一个上传组件，支持拖拽上传、文件类型限制、进度条显示等功能，但是有时会遇到点击删除按钮后视频并未从页面上删除的问题。
这是由于el-upload组件默认只删除已上传成功的文件，而未上传成功的文件需要手动使用remove方法进行删除。因此，我们需要在delete-file方法内部加上remove方法。
methods: {
handleRemove(file) {
const index = this.fileList.indexOf(file);
if (index !== -1) {
this.fileList.splice(index, 1);
}
this.$refs.upload.remove(file); // 手动删除未成功上传的文件
},
},
二、el-upload上传出现重复数据
由于上传时异步处理并发的限制和网络中断等因素，el-upload组件可能会存在出现重复数据情况的问题。为了解决这个问题，我们可以在上传文件之前先对已上传的文件进行比对，若已存在则不再上传。
methods: {
beforeUpload(file) {
const existFile = this.fileList.find(item => item.name === file.name);
if (existFile) {
this.$message.warning(`${file.name} 已存在，无需重复上传！`);
return false; // 阻止上传
} else {
this.uploading = true;
return true; // 允许上传
}
},
},
三、el-upload上传图片
除了上传视频，我们还可以使用el-upload组件进行图片上传。与普通文件上传相比，图片上传需要将成功上传图片的图片链接返回到前端，因此需要进行额外的处理。
data() {
return {
imageUrl: '',
};
},
methods: {
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
if (!isJPG && !isPNG) {
this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
return false;
}
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
this.$message.warning('上传头像图片大小不能超过 2MB!');
return false;
}
},
handleSuccess(response) {
if (response.code === 1) {
this.imageUrl = response.url;
this.$message.success('上传成功');
} else {
this.$message.error(response.msg);
}
},
},
四、el-upload批量上传
el-upload组件支持同时上传多个文件的功能。可以通过设置multiple属性，来允许选择多个文件。
五、el-upload终止上传
在上传多个文件时，有时可能需要中途终止上传。可以通过ref属性获取到el-upload组件的实例，调用abort方法中止上传。
methods: {
abortUpload() {
this.$refs.upload.abort();
},
},
六、el-upload上传文件夹
el-upload组件还支持上传整个文件夹，通过设置directory属性为true即可。
七、el-upload自定义上传
el-upload组件允许我们自定义上传，可以通过配置headers、data等属性来实现自定义上传。下面是一个示例代码：
methods: {
getToken() {
// 获取token
},
getUserInfo() {
// 获取用户信息
},
},
八、el-upload手动上传
如果不想开启自动上传，手动进行上传也是可行的。可以通过refs获取到el-upload组件的实例，调用upload方法实现手动上传。
methods: {
startUpload() {
this.$refs.upload.upload();
},
},
九、el-upload上传超时时间设置
el-upload组件默认的超时时间是30秒，如果需要更改上传超时时间，可以通过设置timeout属性实现。
十、el-upload上传之前清除数据
在上传多个文件时，有时需要在重新选择文件之前清空已选文件列表，可以调用clearFiles方法实现清空操作。
methods: {
clearFileList() {
this.$refs.upload.clearFiles();
},
},
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/154431.html
微信扫一扫 
支付宝扫一扫 