关于element-ui:elementUI-upload组件的妙用

4次阅读

共计 1102 个字符，预计需要花费 3 分钟才能阅读完成。

其实说多了也只是泪，依照原本的我失常的逻辑都是这样的：用 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 的时候会触发那些钩子也没有阐明，最初是我一个个钩子的去尝试，查看有什么应用区别。（当然你也能够说博主的理解能力差吧，这个我不会否定的。）

正文完