uniapp上传图片至服务器，获得在线图片链接预览（实战）

Posted 2023-04-23

参考技术A 功能需求：
前端选择本地文件，将选择好的文件显示在界面上进行预览，可同时选择四张进行预览。

思路如下：
前端选择本地的png、jpg、等格式的图片，将图片以二进制的形式传到后端服务器，后端对二进制图片进行处理，返回给前端一个服务器链接在线图片，在浏览器就可以打开链接访问的那种。然后前端将这个图片链接渲染在页面进行预览。

首先
我们看一下uniapp的官方文档：
https://uniapp.dcloud.io/api/media/image?id=chooseimage

大概是这样的
先写一个模拟的demo
1：首先我是是用了colorUI的框架，在项目里面引入

在page底下的vue文件引入

这样一来，就不需要写什么样式了，直接使用写好的就行了。

效果是这样的
每次选完图片之后显示在页面上，我这里设置了最多可以选择四张，图片链接使用了临时的blob，接下来就要使用后端小伙伴给的接口，将自己本地的二进制文件传给他了。

在 chooseImage 选择好图片之后，写一个成功的回调函数，在回到函数里面添加一个图片上传的方法uploadFile，在方法里面添加url，等参数。

若是请求成功
则返回一个图片链接

添加接口之后 的，demo如下：

前端图片预览，上传前预览，兼容IE7891011，Firefox，Chrome

在现在的Web开发中不可避免的会做一个图片预览的功能，

比如在上传图片的情况下，一个很简单的办法就是讲图片上传至服务器之后，再将文件的URL返回回来，然后异步通过这个URL加载刚刚上传的图片，实现图片的预览，

很明显的在这个过程中两次Web请求，一次发送文件，一次下载文件，到最后这个文件如果在客户端被删除（取消上传，弃用这次的上传），

这整个过程都白费了。我们希望能够在图片上传之前就能进行图片的预览，这样就避免了不必要的网络请求和时间等待。 

 

在IE中有如下方式

var url; var fileobj = document.getElementById(sourceId); fileobj.select(); url = document.selection.createRange().text;

或者

var url = document.getElementById(sourceId).value;

两种方式获取到的路径直接给img src 可以进行本地图片的预览（可以加上file:///协议，效果一样），这两种方式对IE7、8、9、10、11下有效。

 

 

在Firefox和Chrome中使用如下方式:

 

var url = window.URL.createObjectURL(document.getElementById(sourceId).files[0])

 

将得到的值给img src 进行图片预览。可能还会看到如下的方式：var url = obj.files.item(0).getAsDataURL();
这种使用Firefox File对象的getAsDataURL的方式，已经在Firefox 7.0以后弃用，Firefox DOM File，可能原因是在HTML5标准中有相关的定义。

 

 

链接