el-upload使用http-request上传时UI跳动

在使用el-upload组件时,如果使用自定义上传http-request,文件列表file-list是无法自动更新的,需要将文件地址手动push进绑定的file-list中

file-list的官方说明是这样的

上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]

然而,按照{name,url}的格式push进入绑定数组后,UI会出现图片反复左右跳动的问题

原因是因为el-upload是用uid做上传列表遍历的key,然后transition-group动画是根据key来的,如果操作了fileList,没有传入uid,导致el-upload的uid重新生成,导致动画过渡有问题

只需要在push时加入一个uid就可以解决了

el-upload上传组件遇到的问题

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
您可以使用 el-upload 组件来自定义上传http-requestel-uploadElement UI 框架中用于文件上传的组件,支持多种自定义配置选项。 要实现自定义上传http-request,您可以通过设置 el-upload 组件的 action 属性来指定上传文件的接口地址。例如: ```html <el-upload action="/your-upload-api" :http-request="uploadRequest" > <!-- 填充上传组件的内容 --> </el-upload> ``` 然后,在 Vue 实例的 methods 中定义 uploadRequest 方法来处理上传请求。uploadRequest 方法会接收一个参数,其中包含了上传文件的相关信息,如文件对象、文件名等。您可以在该方法中使用 axios 或其他网络请求库发送自定义的上传请求。例如: ```js methods: { uploadRequest(file) { // 构建 FormData 对象,将文件和其他参数添加到 FormData 中 const formData = new FormData(); formData.append('file', file.raw); formData.append('name', file.name); // 使用 axios 发送自定义的上传请求 axios.post('/your-upload-api', formData) .then(response => { // 处理上传成功的响应 console.log(response.data); }) .catch(error => { // 处理上传失败的错误 console.error(error); }); } } ``` 在 uploadRequest 方法中,您可以根据实际需求构建 FormData 对象,并发送自定义的上传请求。在请求成功或失败,您可以进行相应的处理逻辑。 这样,您就可以使用 el-upload 组件来实现自定义上传http-request。希望对您有所帮助!如有其他问题,请随提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值