uni-file-picker组件删除回显数据时会改变回显数据的结构

[xiao-xiaozi]

回显时的数据结构：

uploadFiles:[
{ name:'',extname:"",url:"https://tse3-mm.cn.bing.net/th/id/OIP-C.Md86Wi2EYiKHNPldRZiD4gHaEo?w=286&h=180&c=7&r=0&o=5&pid=1.7",id:3 },
{ name:'',extname:"",url:"https://tse1-mm.cn.bing.net/th/id/OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo?w=286&h=180&c=7&r=0&o=5&pid=1.7",id:2 },
{ name:'',extname:"",url:"https://tse4-mm.cn.bing.net/th/id/OIP-C.GC_ugX-TzPVR26SSxI1kZwHaE9?w=267&h=180&c=7&r=0&o=5&pid=1.7",id:1 },
]

触发一次删除后的数据结构

[
{ cloudPath:undefined, extname:"", fileID:undefined, fileType:undefined, image:undefined, name:"", path:"https://tse3-mm.cn.bing.net/th/id/OIP-C.Md86Wi2EYiKHNPldRZiD4gHaEo?w=286&h=180&c=7&r=0&o=5&pid=1.7",size:undefined,status:undefined, url:"https://tse3-mm.cn.bing.net/th/id/OIP-C.Md86Wi2EYiKHNPldRZiD4gHaEo?w=286&h=180&c=7&r=0&o=5&pid=1.7",uuid:undefined }
// .....
]

查看组件源码发现是触发delete事件时，执行setEmit方法，触发backObject导致的数据结构变化

部分源码：

// ...


/**
 * 删除文件
 * @param {Object} index
 */
delFile(index) {
	this.$emit('delete', {
		index,
		tempFile: this.files[index],
		tempFilePath: this.files[index].url
	})
	this.files.splice(index, 1)
	this.$nextTick(() => {
		this.setEmit()
	})

/**
 * 获取文件名和后缀
 * @param {Object} name
 */
getFileExt(name) {
	const last_len = name.lastIndexOf('.')
	const len = name.length
	return {
		name: name.substring(0, last_len),
		ext: name.substring(last_len + 1, len)
	}

/**
 * 处理返回事件
 */
setEmit() {
	let data = []
	if (this.returnType === 'object') {
		data = this.backObject(this.files)[0]
		this.localValue = data?data:null
	} else {
		data = this.backObject(this.files)
		if (!this.localValue) {
			this.localValue = []
		}
		this.localValue = [...data]
	}
	// #ifdef VUE3
	this.$emit('update:modelValue', this.localValue)
	// #endif
	// #ifndef VUE3
	this.$emit('input', this.localValue)
	// #endif
},

/**
 * 处理返回参数
 * @param {Object} files
 */
backObject(files) {
	let newFilesData = []
	files.forEach(v => {
		newFilesData.push({
			extname: v.extname,
			fileType: v.fileType,
			image: v.image,
			name: v.name,
			path: v.path,
			size: v.size,
			fileID:v.fileID,
			url: v.url,
			// 修改删除一个文件后不能再上传的bug, #694
      uuid: v.uuid,
      status: v.status,
      cloudPath: v.cloudPath
		})
	})
	return newFilesData
}

// ...

这里的数据结构改变会导致原存放在回显数据里面的业务字段丢失，例如此次回显数据的id字段。

两个问题

1. 此处数据结构变更是否应该保留原有字段？期望应该是的
2. delete事件在触发删除之前就已经抛出$emit('delete)，这里会导致在父组件在响应删除事件时拿到的数据时删除前的

[xiao-xiaozi]

补充第二点问题的期望：应该是删除后再抛出delete事件吧。

[GRCmade]

你好，这么做是为了与unicloud数据结构对齐，如果对你造成问题可以尝试在使用前验证

[xiao-xiaozi]

你好，这么做是为了与unicloud数据结构对齐，如果对你造成问题可以尝试在使用前验证

请问是不是可以理解为这个uni-file-picker组件只能在使用unicloud的情况下使用

[GRCmade]

你好，这么做是为了与unicloud数据结构对齐，如果对你造成问题可以尝试在使用前验证

请问是不是可以理解为这个uni-file-picker组件只能在使用unicloud的情况下使用

不是的，这只是放回时的数据不同而已

[wangpanpan8897]

你好，你这个问题解决了吗？遇到了同样的问题，提交时候改变了数据结构，应该在哪里加判断限制呀？

[xiao-xiaozi]

时间有点久了，细节不太记得。如果组件的实现没有变化，需要改动一下组件里面backObject的实现，数据结构变化的原因在这里。

---

发件人: wangpanpan8897 @.> 发送时间: 2025年9月10日 13:41 收件人: dcloudio/uni-ui @.> 抄送: 小小子 @.>; State change @.> 主题: Re: [dcloudio/uni-ui] uni-file-picker组件删除回显数据时会改变回显数据的结构 (Issue #912)

[https://avatars.githubusercontent.com/u/6168382?s=20&v=4]wangpanpan8897 left a comment (dcloudio/uni-ui#912)https://github.com/dcloudio/uni-ui/issues/912#issuecomment-3273394230

你好，你这个问题解决了吗？遇到了同样的问题，提交时候改变了数据结构，应该在哪里加判断限制呀？

― Reply to this email directly, view it on GitHubhttps://github.com/dcloudio/uni-ui/issues/912#issuecomment-3273394230, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AL6TQBHAA3G3BLGD2ZW2W6T3R62YVAVCNFSM6AAAAACGDAW3HWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTENZTGM4TIMRTGA. You are receiving this because you modified the open/close state.Message ID: @.***>