element-ui使用upload上传多个文件只请求一个接口
时间：2023-04-02 18:02:19
HTML
方法一不使用组件内部的hook选择文件上传到服务器只能上传jpg、png、gif格式的图片，大小不超过500KB
js点击上传到服务器在点击按钮的时候调用这个函数，也就是说不使用uploadhook，不调用他的方法submitUpload(){let{uploadFiles}=this.$refs.uploadletform=newFormData()letstatus=true//这里检查每张图片的大小。不匹配则提示，不匹配则提示。校验完成后，只要有不满足条件的，就不会执行下面的操作uploadFiles.forEach(item=>{constsize=item.raw.size/1024<=500if(!size){this.$message.error(`${item.raw.name}sizeexceeds500KB`)status=falsereturn}form.append('image[]',item.raw)})if(!status){返回}//满足条件后，将FormData对象传给后端//调用接口上传表单参数}方法二使用内部回调获取对应的
选择文件上传到服务器只能上传jpg、png、gif格式的图片，大小不超过500KB jsbeforeImageUpload(file){//hookpairbeforeuploadingfiles上传前验证文件constsize=file.size/1024<500if(!size){this.$message.error('Thesizeoftheuploadedimagecannotexceed500KB!')}returnsize}hook返回false然后给file后面的hooks不会再执行了，所以http-request中的hook不会执行，这个hook得到的信息都是通过的文件file的信息确认。ImageRequest(file){this.formData.append('image[]',file.file)}此时这个formData里面的数据就是校验通过的数据submitUpload(){this.formData=newFormData()//手动触发上传this.$refs.upload.submit()//至此，所有的钩子都执行完毕，formData中存放的数据就是通过校验的数据//此时调用接口上传数据}该方法使用时不满足条件的文件会自动删除，可能只留下满足条件的文件，因为before-uploadhook不满足要求。之后，它会调用deleted钩子。因此，使用方法1比这种方法要好得多。这种方法让我们免于编写样式、预览和组件。我为你做了，你只需要写逻辑
