uview+uniapp+springboot 实现小程序上传图片并回显

Posted 2023-03-31 久远jy_naru

小程序上传图片并回显

首先梳理一下便是：小程序类似于网页页面，因此上传回显其实和网页端的上传回显是类似的。

需求模拟

这边的一个需求便是：表单页面中包含一个上传图片的功能，并且上传后可以立即回显。

用到的框架有：uniapp、uview、springboot。

思路

整体的思路便是：使用 uview 框架自带的上传组件，并在 vue 页面中调用后端接口将图片上传至服务器即可。
关于回显，因为我还要做一个表单详情的页面，因此是通过获取服务器端已上传图片的url来进行回显的。
接下来，我们来查看代码。

代码

小程序端

上传组件相关的小程序端代码：

				<u-upload customStyle="margin-left:25rpx"
					:fileList="fileList1"
					@afterRead="afterRead"
					@delete="deletePic"
					name="1"
					multiple
					:maxCount="1"
					width="200"
					height="200"
				></u-upload>
				
				

此处是使用了 uview 自带的上传组件。详细内容请查看相关说明文档。
这里我们通过 multiple 和 :maxCount 对上传的图片个数做了限制，只能上传 1 张。

在 data 方法中定义图片列表 fileList1.

data()
	return
		fileList1:[]
	

在 methods 方法中定义上传组件的各种点击事件（删除、新增、上传）

			deletePic(event) 
				this[`fileList$event.name`].splice(event.index, 1)
			,
			// 新增图片
			async afterRead(event) 
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList$event.name`].length
				lists.map((item) => 
					this[`fileList$event.name`].push(
						...item,
						status: 'uploading',
						message: '上传中'
					)
				)
				for (let i = 0; i < lists.length; i++) 
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList$event.name`][fileListLen]
					this[`fileList$event.name`].splice(fileListLen, 1, Object.assign(item, 
						status: 'success',
						message: '',
						url: result
					))
					fileListLen++
				
			,
			uploadFilePromise(url) 
				return new Promise((resolve, reject) => 
					console.log(this.fileList1[0].url);
					let a = uni.uploadFile(
						url: 'https://yourapi/upload/picture', // 仅为示例，非真实的接口地址
						filePath: this.fileList1[0].url,
						name: 'file',
						formData: 
							user: 'test'
						,
						success: (res) => 
							getApp().globalData.imageUrl=res.data;
							setTimeout(() => 
								resolve(res.data.data)
							, 1000)
						
					);
				)
			,

这里 uploadFilePromise方法中的 getApp().globalData.imageUrl=res.data ;
是将调用上传接口返回的图片地址传给一个全局变量。
我们之后直接调用此全局变量进行图片回显就可以了。

提交按钮点击事件中的相关操作：
将图片地址传递给后端，存入数据库中，保证在别的页面通过api调用可以直接拿到图片的上传地址。

这里存入数据库的 url 均为存入服务器中的真实域名url，而非微信的 wxfile:// 或 http://tmp

			submit() 
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				// this.uploadFile(0);
				this.$refs.form1.validate().then(res => 
					uni.$u.http.post('api/add', 
						imageUrl: getApp().globalData.imageUrl,
					).then(res => 
						uni.showToast(
							icon: "success",
							title: "提交成功"
						);
						);
					)
				).catch(errors => 
					uni.$u.toast(errors)
				)
			,

java后端

后端相关代码：

上传图片相关的控制层：

@RestController  
@RequestMapping("/upload")  
public class UploadController   
    private static final Logger logger = LoggerFactory.getLogger(UploadController.class);  
  
    private SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyyMMdd");  
  
    final String BaseUrl = "";//这里要拼接api的url
      
  
    @Value("$file-save-path")  
    private String fileSavePath;  
  
    @RequestMapping("/picture")  
    public String uploadPicture(HttpServletRequest request, HttpServletResponse response) throws Exception   
        String filePath = "";  
        request.setCharacterEncoding("utf-8"); //设置编码  
        String directory =simpleDateFormat.format(new Date());   
        File dir = new File(fileSavePath+directory);  
        System.out.println(dir.getPath());  
        //创建一个名为当前年月日的文件夹，在文件夹中存放图片
        if (!dir.isDirectory())   
            dir.mkdirs();  
          
        try   
            StandardMultipartHttpServletRequest req = (StandardMultipartHttpServletRequest) request;  
            //获取formdata的值  
            Iterator<String> iterator = req.getFileNames();  
  
            while (iterator.hasNext())   
                MultipartFile file = req.getFile(iterator.next());  
                String fileName = file.getOriginalFilename();  
                //真正写到磁盘上  
  
                String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));  
                String newFileName= UUID.randomUUID().toString().replaceAll("-", "")+suffix;  
                File file1 = new File(fileSavePath+directory+"/" + newFileName);  
                file.transferTo(file1);  
                System.out.println(file1.getPath());  
            //这里进行了路径拼接，根据自己的存放路径进行修改即可。
                filePath = BaseUrl + "/uploads/images/" +directory+"/"+ newFileName;  
              
         catch (Exception e)   
            logger.error("", e);  
          
        return filePath;  
      
  
  

文件路径配置

关于文件路径配置的问题。文件到底要怎么上传，要上传在哪里？这里给出配置代码。

思路

首先理清思路，
想要图片能够通过url能够直接访问到，那么我们：

第一步：要确保图片上传服务器指定位置成功。
首先要指定上传位置。
springboot 项目下的 resources 文件夹中的配置文件中加入以下配置：

可以不叫 file-save-path 和第三步 value 注解中的值对应上就好。

file-save-path: D:/images

第二步：域名是能打开的。（这里自己测试。）

第三步：域名拼接映射路径是可以成功映射的。
这里我们要自己编写一个 web 配置类。
我在这里做了关于 /images/的映射。这都是可以自行修改的。

改成别的的话，最后 图片的访问url就是 `https://url/yourmap/**`

@Configuration  
public class WebConfig implements WebMvcConfigurer   
  
    @Value("$file-save-path")  
    private String fileSavePath;  
  
    @Override  
    public void addResourceHandlers(ResourceHandlerRegistry registry)   
        /**  
         * 配置资源映射  
         * 意思是：如果访问的资源路径是以“/images/”开头的，  
         * 就给我映射到本机的“E:/images/”这个文件夹内，去找你要的资源  
         * 注意：E:/images/ 后面的 “/”一定要带上  
         */  
//        registry.addResourceHandler("/static/**")  
//                .addResourceLocations("file:"+fileSavePath);  
//        registry.addResourceHandler("/uploads/pic/**").addResourceLocations("file:"+fileSavePath);  
        registry.addResourceHandler("/images/**").addResourceLocations("file:"+fileSavePath);  
  
      

uniapp引入uview插件

uview插件是一个很好用的插件，官网：https://www.uviewui.com
引入uview的时候，
1、在插件市场hbuilder直接引入，https://ext.dcloud.net.cn/plugin?id=1593
2、

// main.js，注意要在use方法之后执行
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
// 如此配置即可
uni.$u.config.unit = 'rpx'

3、

app.vue /*每个页面公共css */
 @import "@/uni_modules/uview-ui/index.scss";
 4、在uni.scss引入 @import '@/uni_modules/uview-ui/theme.scss';
 5、关于SCSS
uView依赖SCSS，您必须要安装此插件，否则无法正常运行。
如果您的项目是由HBuilder X创建的，相信已经安装scss插件，如果没有，请在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装， 如不生效，重启HX即可
如果您的项目是由vue-cli创建的，请通过以下命令安装对sass(scss)的支持，如果已安装，请略过。
// 安装node-sass
npm i node-sass -D

// 安装sass-loader
npm i sass-loader -D