element Ui(element ui用法)

本文总结了elementUi库中文件上传组件的使用。首先，我不喜欢“神话”的打包组件库，也不需要向任何人证明我是否能打包更好的组件。如果有必要，是可以实现的。在使用组件库和其他第三方库时，仍然需要打开它们的源代码进行阅读。这不就是前端的魅力之一吗！活跃的社区，繁荣的图书馆。源代码分析这个组件主要由四个小组件组成。UploadDragger，UploadList，ElProgress .最根本的其实是上传原生输入文件。Upload.vue
如果文件被拖动和上传，H5拖动事件被采用。UploadDragger组件。
UploadList组件负责文件显示。这个组件可以拿出来单独使用，很好用！
//单个演示文件对象的目录结构constfile={UID: ‘ ‘，名称3360 ‘ ‘，URL3360 ‘ ‘，状态3360 ‘ ‘
这个组件的自动上传从概要开始就没有使用过，因为有太多的请求头、参数等。需要在实际项目中定制上传。操作：直接手动选择要上传的文件，点击【删除】，直接删除。目前，主要的策略是只绑定on-remove和on-change函数。注意是绑定的。一开始我只是想当然的认为一直都是事件监控哈哈。其他on-success、on-error、on-progress没有设置，默认情况下它们是空函数。On-preview可以设置、定制或更改为点击下载文件。请注意，绑定的on-change函数将在handleStart、handleSuccess、handleError中调用，所有这些函数都由组件本身封装。输入标记只监听on-change事件，组件在触发on-change事件后调用handleStart绑定的on-change函数。文件上传后，它调用handleSuccess和handleError。
//: on-change=’ function(file，fileList){ return handleUploadChange(file，file list，Index)}’//是不是比这样写优雅多了？哈哈哈handleUploadChange(index) {//注意这里指向返回函数(file，file list){//文件的处理mcrc的类型，大小是否合法//非法，可以调用fileList.pop()弹出文件。//上传文件，处理成功，处理不成功。//-可以根据返回的结果直接修改file对象的属性值。name，URL//-不建议更改其uid属性，因为会涉及到显示组件的列表渲染。您可以设置id属性。用于直接删除文件的}}//on-change函数是这样绑定的，因为我们需要传递一个额外的参数index用于回调函数。//之所以可以这样写，是因为我们给出的绑定函数是在源代码中直接调用的。//this.onChange(file，this . upload files)；大概就是这样。在实际使用中，可以读取更多的源代码，输出更多的信息。早点睡吧，狗头会保命的。mixins还能总结出什么？最后我已经打算放弃Vue，用React了。无关技术纯属喜好。原地址：https://zzfd.github.io/2021/03/20/elementUi埃卢普洛德