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