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

功能需求： 前端选择本地文件，将选择好的文件显示在界面上进行预览，可同时选择四张进行预览。 思路如下： 前端选择本地的png、jpg、等格式的图片，将图片以二进制的形式传到后端服务器，后端对二进制图片进行处理，返回给前端一个服务器链接在线图片，在浏览器就可以打开链接访问的那种。然后前端将这个图片链接渲染在页面进行预览。 首先 我们看一下uniapp的官方文档：https://uniapp.dcloud.io/api/media/image?id=chooseimage大概是这样的 先写一个模拟的demo 1：首先我是是用了colorUI的框架，在项目里面引入 在page底下的vue文件引入 这样一来，就不需要写什么样式了，直接使用写好的就行了。 效果是这样的 每次选完图片之后显示在页面上，我这里设置了最多可以选择四张，图片链接使用了临时的blob，接下来就要使用后端小伙伴给的接口，将自己本地的二进制文件传给他了。 在 chooseImage 选择好图片之后，写一个成功的回调函数，在回到函数里面添加一个图片上传的方法uploadFile，在方法里面添加url，等参数。 若是请求成功 则返回一个图片链接 添加接口之后 的，demo如下：

工具/原料 FlashFXP VPN 文件夹步骤/方法 首先建立一个文件夹，把当天需要上传的图片存放到同一个文件夹，这样不会和以前的图片混淆一起难以辨认。然后就是连接到VPN，输入VPN用户名以及密码，连接成功。打开FlashFXP，这个工具是上传图片的直接工具，首先连接到服务器，点击圆圈箭头处的连接图标，输入连接类型、用户名、密码，连接成功。在FlashFXP工具的左栏的圆圈处打开开始创建的新文件夹，在FlashFXP工具的左栏的圆圈处打开一个新文件夹，这个很重要，最好是每天上传图片到服务器中建立一个新的文件夹。将要上传的图片直接复制、粘贴到左栏框内，点击鼠标右键弹出的传输指令，然后上传到服务器成功。图片上次服务器已成功，然后就可以用代码的格式编辑到文章中。注意事项 最好是每天上传图片到服务器中建立一个新的文件夹。文件夹不要随便更改其初始位置。图片修改成较容易记的名称，因为在插入图片时要用源代码的形式输入图片名称。 更多精彩电脑信息，请登录:中国高速网-IT频道。

---