elementUI upload组件的妙用

其实说多了也只是泪，按照本来的我正常的逻辑都是这样的：用upload组件，选择图片的时候就会立刻上传到指定的地址，最多也就配置一下header，再大不了就手写限制一下文件的大小。但是我这边的需求是这样的：上传的时候用的是文件流，就是直接把文件流赋值给参数，然后回显的时候后端会返回一个图片的id，我通过拼接地址的方式去显示图片。我第一时间的心情的这样的：

但是没办法啊，后端他们不打算改，只能前端苦逼的寻找问题的解决办法。经过多次的尝试(掉了很多的头发），终于发现了如何去处理这个问题了。下面介绍主角：

上传图片使用文件流形式

下面的代码参考：

<el-upload
  class="avatar-uploader"
  action="#"
  list-type="picture-card"
  :file-list="form.codeArray"
  :limit="1"
  accept="image/jpg, image/jpeg,image/png"
  :auto-upload="false"
  :on-exceed="handleExceed"
  :on-change="handleChange"
  :on-remove="handleRemove"
>
  <i class="el-icon-plus"></i>
  <div slot="tip" class="el-upload__tip">
    建议上传1:1尺寸图片，避免显示不全
    <strong >(只能上传一张图片)</strong>
  </div>
</el-upload>
复制代码

参数不做说明，详情可以参考这里。
将auto-upload设置为false的时候，你会发现你之前使用的钩子很多都没有用，唯独有一个钩子会触发的，可以让你获取到文件的，那就是on-change事件。来看看官方文档的介绍：

当我们添加图片的时候onchange事件会有下面的输出

还记的我的需求吗？没错，就是上传的时候把文件流赋值给参数，上面参数中raw就是我们需要的，我们只要把这些东西给赋值变量就可以了。

回显使用图片地址

回显的时候就相对简单了，就是直接按照官网的格式放进去数组就完事了

{
   title: 'aaa',
   url: 'aaa.jpg'
 }
复制代码

移除的时候就相对应的是用on-remove的事件去移除数组中的元素就可以了。

总结

总体的步骤不算难，难点就可能是在发现的过程吧，第一就是这个auto-upload，文档中只是简单的说不会立即上传，但是说明实际有什么用途，再就是设置这个属性值为false的时候会触发那些钩子也没有说明，最后是我一个个钩子的去尝试，查看有什么使用区别。（当然你也可以说博主的理解能力差吧，这个我不会否认的。）