elementUI upload上传组件 初步探索

使用elementuUI 中upload组件

一.组件的使用，element组件链接：https://element.eleme.cn/#/zh-CN/component/upload

以第一个栗子🙃为例：

代码如上图所示，不要怕！！
我来解释一波：
1.class属性，这个是css里面的，我就不多说了
2.action 这个属性，后面跟着的是你要把图片上传到后端接口地址

3.on-preview:这个是点击文件列表中已上传的文件时的钩子，就是在你点击上传文件后，点击下边出现的文件列表时，所执行的函数！形参就是file,这里指的就是你上传的文件，可以打印一下这个file,看看里面包含着什么属性。

顺便说一句：那么在你点击文件列表的时候，执行的就是handlePrieview这个方法。
那么我们接下来看看，这个方法，都有啥用。

我们看到此时文件列表中有两种.jpeg的文件

你可以在element官方界面中，右键点击检查。

点击food.jpeg,可以看到左侧的控制台输出了一些东西

把控制台点开，我们可以看到打印了一些东西，如果你想拿到上传文件的名称，那么file.name就可以拿到了

接下来我们继续

4.文件列表移除文件时的钩子：一样，就是在你点击文件列表右边的叉号时，所执行的函数。同3一样，当你移除文件时，就会调用handleRemove这个函数。

5.before-remove，这个钩子是在你上传文件之前所执行的，在这里你可以进行类型的检查。比如：你只想让用户上传.doc文件类型的，那么在这个钩子里，你就可以去进行用户上传文件的判断。参数中的file，就是用户上传的文件，fileList就是文件列表啦

这个函数可以自己去试一下，console.log一下这些参数。

如果这个钩子所绑定的函数return false，那么就会停止上传。
就是当你判断用户上传的文件不是.doc那么你就return false,这样就不会上传文件了！