3.8K Star 14.8K Fork 5K

卓源软件 / JeeSite 4.4 and 5.0

 / 详情

移动端图片上传,在fileUpload 中出现file_id重复的问题(file_id 对应的是filentity的id)

Backlog
Opened this issue  
2022-06-08 11:13

问题描述:

H5 上传的时候,每一张图片对应的FileEntity 一条数据,没有问题;现在是在真机上,上传的时候,fileUpload对应的多条数据,但file_id 一样,且在FileEntity 中 只对应一条数据,这样导致的结果就是 上传多张不同图片后,只会出现同样的一张图片。

移动端上传后返回的数据格式

{
	"result": "true",
	"code": "server",
	"fileUpload": {
		"isNewRecord": false,
		"id": "1534360433680216064",
		"updateDate": "2022-06-08 10:23",
		"createByName": "超级管理员",
		"status": "0",
		"createBy": "system",
		"createDate": "2022-06-08 10:23",
		"updateByName": "超级管理员",
		"updateBy": "system",
		"fileName": "1654655006818_16545955993841.jpg",
		"fileType": "image",
		"fileEntity": {
			"isNewRecord": false,
			"id": "1534359760502812672",
			"status": "0",
			"fileMetaMap": {
				"width": 361,
				"height": 768
			},
			"fileMd5": "2f1e861d563b5782f9dcd23ac8b98a38",
			"fileExtension": "jpg",
			"fileSize": 139351,
			"fileContentType": "image/jpeg",
			"fileId": "1534359760502812672",
			"fileMeta": "{\"width\":361,\"height\":768}",
			"filePath": "202206/",
			"fileSizeFormat": "136.085KB"
		},
		"fileUrl": "/userfiles/fileupload/202206/1534359760502812672.jpg"
	},
	"message": "秒传成功,用时32毫秒"
}

问题是应该是出现在 fileEntity 中 id 中都是一样的,我推测是因为不是isNewRecord,导致id不变,那应该如何修改?

"fileEntity": {
			"isNewRecord": false,
			"id": "1534359760502812672",
			"status": "0",
			"fileMetaMap": {
				"width": 361,
				"height": 768
			},

移动端上传图片和核心代码

console.log("上传文件类型------------>");
						console.log('formData' + JSON.stringify(formData));
						self.$u.post(adminPath + '/file/upload', formData).then(res => {
							
							console.log(res);
							// 文件已经上传,启用秒传
							if (res.result == 'true' && res.fileUpload){
								item.fileUploadId = res.fileUpload.id;
								item.progress = 100;
								item.error = false;
								reject(res);
							}
							// 文件未上传过,继续上传文件
							else if (res.fileUploadId && res.fileEntityId){
								formData.fileUploadId = res.fileUploadId;
								formData.fileEntityId = res.fileEntityId;
								item.fileUploadId = res.fileUploadId;
								resolve();
							}
							// 未知错误,提示服务端返回的信息
							else {
								uni.showModal({title: '提示', content: res.message });
								reject(res);
							}
						}).catch(err => {
							console.error(err);
							reject(err);
						})
					}

后端的核心代码

 **FileUploadController** 
@RequestMapping({"upload"})
    @ResponseBody
    public Map<String, Object> upload(FileUploadParams params) {
        return this.fileUploadService.uploadFile(params);
    }

 **FileUploadService** 
public interface FileUploadService extends CrudServiceApi<FileUpload> {
    void delete(FileUpload var1);

    FileUploadServiceExtend getFileUploadServiceExtend();

    Map<String, Object> uploadFile(FileUploadParams var1);

    FileUpload get(FileUpload var1);

    void updateStatus(FileUpload var1);

    Page<FileUpload> findPage(FileUpload var1);

    void save(FileUpload var1);
}

Comments (5)

涛涛之海 created任务

上面正常两条数据是在 H5 上传的,是我的真机的问题吗?请各位大佬指教

这个是app端md5算法的问题,检查提交的fileMd5参数,在不同端是否正常

核心代码:

function uploadFile(arrayBuffer){
						let buffer = arrayBuffer;
						console.log("------------>每次生成的一样buffer?"+buffer);
						let size = 10 * 1024 * 1024;
						let spark = new SparkMD5.ArrayBuffer();
						console.log("------------>每次生成的一样spark?"+spark);
						if (buffer.byteLength > size){
							console.log("-----》1");
							spark.append(buffer.slice(0, size));
						}else{
							console.log("-----》2");
							spark.append(buffer);
						}
						console.log(spark);
						formData.fileEntityId = '';
						formData.fileUploadId = '';
						formData.fileMd5 = spark.end();
						console.log("fileMd5------------>"+formData.fileMd5);
						if (!item.file.name) {
							item.file.name = item.url.split('/').pop();
						}

移动端显示结果

 ------------>每次生成的一样buffer?�PNG
------------>每次生成的一样spark?[object Object] 
 -----》2 
 [Object] {"_buff":{},"_length":null,"_hash":[1732584193,-271733879,-1732584194,271733878]} 
fileMd5------------>2f1e861d563b5782f9dcd23ac8b98a38

H5显示结果

------------>每次生成的一样buffer?[object ArrayBuffer]
------------>每次生成的一样spark?[object Object]
-----》2
SparkMD5.ArrayBuffer {_buff: Uint8Array(17), _length: 45201, _hash: Array(4)}
fileMd5------------>112848c187a08bb74618ac35afaff63e

H5每次显示不一样,app 上每次都一样,我看好像是app 上无法识别arrayBuffer 这种类型?

最后解决方案: 是没有用sprakMd5 这个算法,用唯一序列号替代了,这样做会导致相同的图片也会再次上传不影响整体功能。
问题原因应该是移动端不适配导致的问题;这里MD5的作用是对一张图片生成唯一的序列号,用于区分不同的照片。

Sign in to comment

Status
Assignees
Milestones
Pull Requests
Successfully merging a pull request will close this issue.
Branches
Planed to start   -   Planed to end
-
Top level
Priority
参与者(2)
1855333 claa 1597851810 6732 thinkgem 1651893329
Java
1
https://gitee.com/thinkgem/jeesite4.git
git@gitee.com:thinkgem/jeesite4.git
thinkgem
jeesite4
JeeSite 4.4 and 5.0

Search