「加载服务器图片预览问题」
查看 API接口返回的数据时可以看到:
所以在处理图片预览效果的时候,应该是将 url 的地址 赋值给 previewPath,然后加载一个对话框进行img 展示
// 处理图片预览效果
handlePreview(file) {
this.previewPath = file.response.data.url
console.log(this.previewPath)
this.previewVisible = true
},
<!--图片预览模块对话框-->
<el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
<img :src="previewPath" alt="" class="previewImg" />
<span slot="footer" class="dialog-footer"> </span>
</el-dialog>
但是在实操过程中,发现http://127.0.0.1:8888/tmp_uploads/39f29fc416152e0d0be325e263bcb747.png 无法打开,这里需要明确 的一点是,127.0.0.1
其实等同于locahost:
,所以其实他这里是在自己的电脑上布了后端接口,所以相当于他是在访问自己电脑上的一个8888端口的后端数据,我们因为没有布后台,所以肯定是访问不了的,所以这里我们考虑直接 用 file.url
来访问。
// 处理图片预览效果
handlePreview(file) {
console.log(file)
this.previewPath = file.url
console.log(this.previewPath)
this.previewVisible = true
},
但是我们把这个网址前面的 http://127.0.0.1
换成 http://www.ysqorz.top:8888/tmp_uploads/39f29fc416152e0d0be325e263bcb747.png 是可以发现 图片其实 存到远程的服务器数据库里了。
补充知识点:url: "blob:http://localhost:8080/d3234d52-cea0-4a58-bef6-f4c7b0158a1d"
blob (binary large object):二进制大对象
服务器一般存储图片的方式,是上传图片到服务器,服务器返回一个图片在服务器中的 url 地址
,前端取用图片的时直接将存储路径赋值给src属性
即可轻松显示,
但是 blob 是把图片转换成 blob,直接存储到数据库的 image 类型字段中
(不过这种方式负担很大 不建议使用),因为每次 存读取
都得进行二进制流
转换。
Blob URL只能由浏览器在内部生成。这些URL只能在浏览器的单个实例中和同一个会话中(即页面/文档的生命周期)在本地使用。Blob URL / Object URL是一种伪协议,允许Blob和File对象用作图像,下载二进制数据链接等的URL源。可以通过文件读取器API创建Blob并获取File对象,尽管BLOB只是意味着Binary Large对象并以字节数组的形式存储。客户端可以请求数据以ArrayBuffer或Blob的形式发送。服务器应该将数据作为纯二进制数据发送。数据库通常也使用Blob来描述二进制对象,实际上我们基本上是在谈论字节数组。需要将二进制数据封装为BLOB对象,然后使用它URL.createObjectURL()
为其生成本地URL
不过 element-ui 好像都集成好了,拿来直接访问调用就行 ,还是有一点点没搞懂,到时候再看一下