推广网站设计推广方案,网站建设验收使用情况,软文广告经典案例800字,wordpress的网站好用吗最近公司的一个二期项目#xff0c;开始要求复刻原有一期的功能页面。原先一期又不打算继续维护了#xff0c;源码都没有。页面基本都涉及到了文件上传#xff0c;以前很少使用到这个组件#xff0c;公司有现成的表单设计器#xff0c;文件上传都在组件里面拖动上传。在这…最近公司的一个二期项目开始要求复刻原有一期的功能页面。原先一期又不打算继续维护了源码都没有。页面基本都涉及到了文件上传以前很少使用到这个组件公司有现成的表单设计器文件上传都在组件里面拖动上传。在这里记录一下这个组件基本的使用吧。
vue2的项目在vue3里面使用element-plus的上传组件的话应该差不多。 el-uploadclassupload-demodrag:actionimportUrl:dataimportData:on-successhandleImportSuccess:acceptapplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-exceli classel-icon-upload/idiv classel-upload__text将文件拖到此处或em点击上传/em/divdiv classel-upload__tip slottip只能上传对应的模板文件/div/el-upload
el-upload这个组件在官网里面有完整的参数这边记录一下用到的。
action是要求是一个接口地址如果设置了auto-upload自动上传当选择了文件或拖动文件到对应区域后便会自动调用这个接口将文件上传上去。
如果后台的接口没有其他什么params参数只有post请求时候的data数据的话这里不用变量直接写死就好了。如果接口带一个params参数比如某个随机数r。这个时候就要写成变量并将自动上传参数设置为关闭。然后设置上传之前的事件在那个事件里面重新为importUrl进行赋值改变接口地址。
组件默认的在post请求的data参数里面文件内容的参数是file如果后台接口要求传递文件数据的参数不叫file那么可以通过组件的另一个属性name手动更改为需要的。 除了设置data里面文件的属性名还可以设置data的其他参数。它们会和上面的文件数据一起作为上传接口的data参数。 假如你指定了这个组件的data值为{name:2233}那么在你上传文件的时候你会看到你的post接口的data传参会是{ file: 二进制数据, name: 2233 } el-upload通常会和列表一起显示显示总共有多少资源文件方便删除和添加。 在打开某个详情地址的时候一般需要单独调用一个文件详情接口来查看这个对象有多少关联的资源文件。返回了一个数组之后就可以动态的设置file-list的值来显示已有文件。
还需要考虑用户的删除和添加操作有些时候这种操作要求不会立即生效需要点击某个保存按钮生效的时候。最好的做法是记录用户的操作。
文件上传是一定会要上传上去的上传成功之后会返回文件资源的唯一标识。保存刚打开时候请求的资源列表记录用户上传的所有文件的唯一标识记录用户删除过的文件资源标识。在保存的时候进行对比在用户保存的时候判断是否要调用删除文件的接口。
