饿了么UI组件库中，Upload组件上传闪动的解决

川长思鸟来 2023-02-24 15:21 72阅读 0赞

最近接触到elementUI的上传组件，一路顺畅，就是在上传之后总是发现有闪动的现象，博主对其进行深入研究后发现，其闪动原因，是因为使用的`file-list`并不会自动添加上传了的图片，而需要由我们来人工来添加，而添加则必须使用`on-success`事件中自带的参数去做赋值操作，心中有一万只草泥马奔腾而过的赶脚有木有？

## 闪动问题复现 ##

先是出现闪动问题的GIF图以及其问题代码，如下：  
![优化前][20200709180127788.gif]  
可以非常明显的看到，图片上传成功后，图片会有一个先向右，然后停顿片刻摆着位置后，返回左侧的现象。

<el-upload
      name="file"
      class="upload-demo"
      :action="root + 'goods/uploadImageToAliOss'"
      list-type="picture-card"
      :on-preview="patternRealPicPreview"
      :on-success="handleUploadPatternListSuccess"
      :on-remove="patternRemove"
      :file-list="infoForm.effect"
      :data="{ dir: 'goodsMask' }"
      :headers="uploaderHeader"
      :before-upload="handleBeforeUpload"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    
    // 对应的事件回调如下，这里只看上传成功后的回调事件
    handleUploadPatternListSuccess(response) { 
      // 出现问题的版本1
      this.infoForm.effect.push({ 
      	url: response.data
      })
      
      // 出现问题的版本2
      let list = []
      this.infoForm.effect.forEach((item) => { 
        list.push(item)
      })
      list.push({ 
        url: response.data,
        percentage: 100,
        status: 'success',
        response: response,
      })
      this.infoForm.effect = list
    }

博主是在上传成功的回调事件中，对effect做数组做处理。  
版本1中博主直接对effect数组做`push`操作，博主此时便怀疑会不会是push捣的鬼，故出现了版本2。  
版本2中博主是重新定义了一个`list`数组，将原本`effect`中的数据拿出来，再组合上新上传的图片数据，最后将这个新的`list`赋给`effect`。但是这样做之后，还是出现了问题。

## 寻求解决方案 ##

遇事不决查文档，博主很果断，直接上官方文档，找到了`on-success`事件其实还有两个参数，分别是`file`跟`fileList`，  
其中`file`是本次上传成功的文件信息，`fileList`是已上传成功的文件列表汇总。  
博主想着，要不就拿这两个参数试一下，一番捣鼓之后，惊喜的发现还真的成功了！  
下边放成功之后的效果图以及相应的实现代码：  
![优化后][20200709182421683.gif]  
可以非常明显的看出来，闪动的现象已经消失了。  
而其改动非常小：

handleUploadPatternListSuccess(response, file, fileList) { 
      // 成功实现的版本1
      this.infoForm.effect.push(file)
    
      // 成功实现的版本2
      this.infoForm.effect = fileList
    }

无非就是使用其事件自带的参数进行`push`或者直接重新赋值的操作。

## 总结 ##

至此问题已经解决，而解决方案其实令博主有点窒息，博主并不清楚该框架的底层究竟对这两个参数做了什么操作，为什么我们自己定义的`list`作重新赋值也不行呢？  
博主对此只能浅显地将其打印出来看看，第一张图为我们自己定义的新的`list`，第二张图则为其回调事件中的参数。  
![自定义][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwNTQwMg_size_16_color_FFFFFF_t_70]  
![事件自带][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwNTQwMg_size_16_color_FFFFFF_t_70 1]  
咋一看，其实其中有什么数据，对是否闪动并没有任何影响（由上边出现问题的代码版本2可知），而`set`跟`get`的构造函数感觉应该也没有影响，同样对于数组项原型`__proto__`则是一样的。  
那么，问题就只有可能出在`__ob__`身上了，博主查了一下，这个东西是Vue底层做双向数据绑定而添加的，仔细想想确实，使用新数组直接作赋值，是没有`__ob__`这个东西的。  
只能感慨学无止境，继续加油吧！

[20200709180127788.gif]: /images/20230209/4480782a0f23404d973b8f05fc2b2ea4.png
[20200709182421683.gif]: /images/20230209/024971996bd94ee1b3a120fb24f3ed90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwNTQwMg_size_16_color_FFFFFF_t_70]: /images/20230209/59ae80e4f19442d98472418476699eaa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkwNTQwMg_size_16_color_FFFFFF_t_70 1]: /images/20230209/32d0746c17da4e8899ae6238b5658061.png