vue中-iview的upload上传图片-获取本地图片绝对路径-在前端实现图片预览
在用iview的upload上传图片的时候，想要实现图片的预览。 但是在iview给的例子中，是每上传一个图片触发一次上传事件，调一次接口，后台将图片存入数据库，再回传给前端，这样实现图片在前端的显示。这个方法对于上传多张图片，无疑很不现实。 于是就有了下面的方法。 想要实现上传多张图片，上传的图依次显示出来，点击提交，实现同时上传，只调一次接口，后台一次性将多张图片存入数据库。 在图片上传前 'handleBeforeUpload' 事件中加入以下代码，获取的_base64即为本地图片的绝对路径，将其存起来，在赋值到img的src路径，即可实现图片在上传前的显示，实现图片的预览 const reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => { const _base64 = reader.result console.log(_base64) } 整体代码copy //图片上传前事件 handleBeforeUpload (file) { this.file = file //需要传给后台的file文件 const reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => { const _base64 = reader.result this.imgUrl = _base64 //将_base64赋值给图片的src，实现图片预览 } return false//阻止图片继续上传，使得form表单提交时统一上传 }