使用fast-crud插件的扩展包fast-extends实现图片上传一：cropper-uploader（裁剪上传）-CSDN博客

本文链接：https://blog.csdn.net/m0_45011929/article/details/147334309

使用这个cropper-uploader时遇到一些问题，主要是，自定义上传接口后没有return一个符合插件需要的对象导致的

代码

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表单
			return {url:response.data.filePath} // 关键代码 一定要是对象类型的且属性一定要有url
		} catch (error) {
		  onError(error)
		  throw error // 抛出错误以便外部处理
		}
	  }

return {
crudOptions: {
	columns: {

			imgUrl: {
				title: "切割图片",
				column: { 
					width: 100 ,
				
					},
				type: "cropper-uploader", //image-uploader  cropper-uploader
				form: {
					
				  component: {
					type: "form",
					maxSize:5, 
					cropper: {
						aspectRatio: 110/23,  // 固定16:9比例
					},
					// vModel:'urls',
					// urls:[{url:imageInfo.url,previewUrl:imageInfo.previewUrl}],
					// buildPreviewUrl:false,
					limit: 1,
					accept:".jpg, .jpeg, .png",
					uploader: {
					  type: "form", 
					  action:undefined,
					  uploadRequest: customUploadRequest,
					// uploadRequest: function(row){
					// 	console.log('ROW',row)
					// },

					
					},
				
				  },
				  rules: createUploaderRules([{ required: true, message: "此项必传", trigger: "change" }]),
				  helper: "最大可上传1个文件，尺寸大小不要超过xxx像素（宽）*xx像素（高）",
				  
				},
				
			  },
	｝// 可能多或者少“}”  自己添加下
}
}