加载服务器图片预览问题

「加载服务器图片预览问题」

查看 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 好像都集成好了，拿来直接访问调用就行 ，还是有一点点没搞懂，到时候再看一下