其实说多了也只是泪,按照本来的我正常的逻辑都是这样的:用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 style="color: red">(只能上传一张图片)</strong>
</div>
</el-upload>
参数不做说明,详情可以参考这里。
将auto-upload设置为false的时候,你会发现你之前使用的钩子很多都没有用,唯独有一个钩子会触发的,可以让你获取到文件的,那就是on-change事件。来看看官方文档的介绍:
当我们添加图片的时候onchange事件会有下面的输出
还记的我的需求吗?没错,就是上传的时候把文件流赋值给参数,上面参数中raw就是我们需要的,我们只要把这些东西给赋值变量就可以了。
回显使用图片地址
回显的时候就相对简单了,就是直接按照官网的格式放进去数组就完事了
{
title: 'aaa',
url: 'aaa.jpg'
}
移除的时候就相对应的是用on-remove的事件去移除数组中的元素就可以了。
总结
总体的步骤不算难,难点就可能是在发现的过程吧,第一就是这个auto-upload,文档中只是简单的说不会立即上传,但是说明实际有什么用途,再就是设置这个属性值为false的时候会触发那些钩子也没有说明,最后是我一个个钩子的去尝试,查看有什么使用区别。(当然你也可以说博主的理解能力差吧,这个我不会否认的。)
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!