如何实现uniapp中上传二进制图片功能？

本文共计1212个文字，预计阅读时间需要5分钟。

功能需求：前端选择本地文件，将选中的文件预览显示在界面上，可同时选择四张图片进行预览。思路如下：前端选择本地的png、jpg等格式图片，将图片以二进制形式传输。

功能需求：

前端选择本地文件，将选择好的文件显示在界面上进行预览，可同时选择四张进行预览。

思路如下：

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

首先

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

大概是这样的

先写一个模拟的demo

1：首先我是是用了colorUI的框架，在项目里面引入

在page底下的vue文件引入

@import "../../colorui/main.css"; @import "../../colorui/icon.css";

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