1.对于上传的钩子,想要传输自己的数据
需求:需要检测上传的视频列表是否有重复的名字
使用·before-upload·
的钩子函数,在上传前去判断,如果存在则返回false
<el-upload
:ref="item.key"
:data="{
classId,
videoName: item.name
}"
:multiple="false"
type="text"
action="http://www..top:8080/class/video"
:limit="1"
:before-upload="beforeUpload.bind('null', index)"
class="upload-demo"
>
<i class="el-icon-upload"></i>
上传视频
</el-upload>
我需要在上传视频文件前检测它是否输入了视频文件名称,但是如果直接绑定函数,就会不知道这个视频文件是哪个对应的文件名称。
所以需要传入v-for绑定的index
,这样就可以准确地知道这个视频名称是否有输入。
视频名称是和input的v-model
双向绑定的,所以是可以直接判断data上的值是否存在。
拓展
我们在使用before-upload
的时候,输出第一个参数file
是有一个上传ID的,我们可以将这个id作为识别这个文件的id值
所以就引出一个问题,可不可以同时获取index
和官方返回给我们的参数
可以的
上代码
<el-upload
:ref="item.key"
:data="{
classId,
videoName: item.name
}"
:multiple="false"
type="text"
action="http://www.gdutrex.top:8080/class/video"
:limit="1"
:before-upload="beforeUpload(index)"
class="upload-demo"
:auto-upload="false"
>
<i class="el-icon-upload"></i>
上传视频
</el-upload>
/*
script
*/
method: {
beforeUpload(index) {
return file => {
window.console.log(index, file);
};
}
利用闭包和before-upload
恰好接受的是一个函数,所以就可以完成同时接受自己的需要的参数和保留官方的参数。
2. upload中绑定data遇到的问题
需求:由于前面使用了file
返回的uid
,如果不想自己写上传的方法,直接用官方的方法的话,就会遇到一个问题。
就是在·vue
·将值传递页面前(即jsp
上绑定的:data的上的值前),请求就已经触发了。
这就导致了传给后台的data可能是空的值。(upload上传是异步的)
解决方案:
我们在上传前等待页面完成,把这个请求触发变成异步。
return new Promise((res, rej) => {
if (this.videolist[index].name === "") {
this.$notify({
title: "提示",
message: ("i", { style: "color: teal" }, "请输入视频文件名")
});
// 调用rej会阻止上传
rej();
} else {
let newList = this.videolist.slice(0);
newList[index].uploadId = file.uid;
let type = file.type.split("/").pop();
newList[
index
].url = `http://www:8080/video/${this.classId}/${file.uid}.${type}`;
window.console.log(file, fileList);
this.$emit("parent-event", newList);
// 在下一次渲染结束后调用 res 就可以让官方的上传事件变成可控制的异步事件
this.$nextTick(() => res());
}
});