使用fast-crud插件的扩展包fast-extends实现图片上传 一：image-uploader

使用该插件时遇到了一些问题，在此记录

问题：

• 在配置文件代码里（columns）先写了这个image-uploader功能的配置，发现弹框的form里仅仅出现了字段但是没有上传的功能，后来发现需要使用fast-extends需要先npm安装，然后在main.ts/js文件里要添加引用初步配置 请查看这篇
• 个人需求：公司有统一的上传api所以上传调接口的地方需要使用自己写的前端接口传入参啥的：涉及到了uploadRequest属性来自定义上传接口

代码

import { upload, } from '/@/api/annexCommonDownLoad';




//.......

// 这个代码就写在 你写的这个配置代码return 上面那部分
	const customUploadRequest = async (options) => {
		const { file, onProgress, onSuccess, onError } = options
		
		// 创建FormData
		const formData = new FormData()
		formData.append('form', file)
		
		try {
			const response = await upload(formData);
			// 进行一些操作，如获取后端返回的附件id等用于提交form表单
		} catch (error) {
		  onError(error)
		  throw error // 抛出错误以便外部处理
		}
	  }

return {
crudOptions: {
	columns: {

		imgUrl: {
					title: "用户头像",
					column: { 
						width: 100 ,
						// 这个地方是涉及到页面table上的该用户头像列的点击查看，大图，小图预览
						// component: {
						// 	buildPreviewUrl({ url, index }) {
						// 		console.log('url',url)
						// 		return "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png";
						// 	//   if (index === 0) {
						// 	// 	return "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png";
						// 	//   } else {
						// 	// 	return url + "?preview=600x600";
						// 	//   }
						// 	}
						//   }
						},
					type: "image-uploader", 
					form: {
					  component: {
						limit: 1,
						accept:".jpg, .jpeg, .png",
						uploader: {
						  type: "form", 
						  action:undefined,
						  uploadRequest: customUploadRequest, // 关键 属性
						
						},
						
						
					  },
					  rules: createUploaderRules([{ required: true, message: "此项必传", trigger: "change" 							}]),
					  helper: "最大可上传1个文件"
					},
					
				  },

	｝// 可能多或者少“}”  自己添加下
}
}