vue+ele plus图片分类上传

前言：需要实时监测花园中某一类花朵的各部位生长情况，上传图片并支持替换、压缩
运用v-for循环，使用action自动上传图片，单张操作

效果展示

以下是主要代码：
template模块

<!-- 遍历imgListObj -->
...
	<!--  各属性解析： action-后端接口地址；headers-请求报文头；data：请求额外携带数据-->
	<!--  on-success额外传参：通过es5的bind，绑定到函数上，就可以实现钩子函数的传参了 --> 
	<el-upload
		class="avatar-uploader"
		action="/test.do"
		:headers="headparams"
		:data="getParams(item.type)"
		:show-file-list="false"
		:before-upload="beforeAvatarUpload"
		:on-success="handleAvatarSuccess.bind(null, { index: index, data: item })"
	>
		<img v-if="item.url" :src="item.url" class="avatar" />
		<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
	</el-upload> 

script模块

...
import * as imageConversion from 'image-conversion'; //压缩插件
...
//分类图片的对象
let imgListObj = reactive<any[]>([
	{
		type: 'roots',
		title: '花根',
		url: '',
	},
	{
		type: 'stems',
		title: '花茎',
		url: '',
	},
	...
]);
 
// 上传前
const beforeAvatarUpload: UploadProps['beforeUpload'] = async (rawFile) => {
	console.log('上传前');
	//一些图片校验
	...

	// 压缩
	// 因为压缩文件是异步的,所以需要返回Promise处理
	return new Promise((resolve, reject) => {
		let isLt2M = rawFile.size / 1024 / 1024 < 2; // 判定图片大小是否小于2MB
		if (isLt2M) {
			resolve(rawFile);
		}
		console.log(rawFile); // 压缩到400KB,这里的400就是要压缩的大小,可自定义
		imageConversion.compressAccurately(rawFile, 400).then((res) => {
			resolve(res);
		});
	});
};
// obj 传来的额外参数
const handleAvatarSuccess: UploadProps['onSuccess'] = (obj, response, uploadFile) => {
	obj.data.url = URL.createObjectURL(uploadFile.raw!); 
};