山东大学项目实训（十三）—— 核心功能（10）

文件上传

这是上报不良事件功能的最后一个小功能。经过翻阅 UNI-APP 官方文档无数次，对文件上传的 API 还是很有印象的。

一、设计思路

话不多说，当时的笔者直接就化身为CV（CTRL C+V）程序猿，拿来就用。由于官方文档明确写出了微信小程序不能多文件上传，只能一个一个文件上传，因此笔者很自然的就想到了 —— 那就用循环语句依次上传呗。 笔者确实是这么做了，且看应用介绍。

二、实现方案

<view class="file-up">
	<uni-file-picker ref="ufp" v-model="fileValue" fileMediatype="all" 
		:list-styles="listStyles" 
		@select="selectFiles"
		@delete="deleteFile">			
	</uni-file-picker>
</view>

// 文件操作
selectFiles(res) {
    
    
	// console.log("选择成功",res)
	var _this = this
	// 循环上传
	for (var i = 0; i < res.tempFilePaths.length; i++) {
    
    
		// 当前下标为 当前上传文件下标 加上 暂存文件数 
		var index = i + temporaryFiles.length
		uni.uploadFile({
    
    
			url: 'http:/xxxxxx/xxxxxx', 
			filePath: res.tempFilePaths[i],
			name: 'file',
			header: {
    
    
				'token': uni.getStorageSync('token')
			},
			formData: {
    
    
				'fileName': res.tempFiles[i].name,// 上传附带参数						
			},
			success: ({
     
      data }) => {
    
    
				// 根据接口具体返回格式   赋值具体对应url
				const result = JSON.parse(data)
				if (result.code == 200){
    
    
					console.log('上传成功')
					uni.showToast({
    
    
						title: '上传成功',
						icon: 'succe'
					})
				} else {
    
    
					_this.autoDel(index)
					index--							
					uni.showToast({
    
    
						title: '上传失败',
						icon: 'error'
					})
				}
			},
			fail: (err) => {
    
    	
				_this.autoDel(index)
				index--							
				uni.showToast({
    
    
					title: '上传失败',
					icon: 'error'
				})
			},
		});
		
	}
},
deleteFile(res) {
    
    },
// 自动删除上传失败的附件
autoDel(index){
    
    
	this.$refs.ufp.autoDel(index)
},

主要属性介绍

• var index = i + temporaryFiles.length —— 要确保暂存的文件不被删除，同时删除上传失败的文件。
• const result = JSON.parse(data) —— 这地方可 debug 死笔者了，由于后端同学返回的是JSON字符串，而非对象，而笔者的请求封装又是很久之前写的，忘记了加这一句将JSON字符串转化为对象！

三、实现难点

从上面代码可以看出，笔者不仅仅只用了循环语句依次上传，还用了自动删除上传失败的文件方法。

虽然 UNI-APP 官方文档提供了文件上传的 API 为 uni-file-picker，但有些功能并不能满足笔者的需求，因此又对源码进行了修改。比如：1. 官方提供的 API 在微信小程序上不能多文件上传，只能单个文件上传；2. 文件上传失败后，仍会将展示文件到列表中，并不会在列表中自动删除上传失败的文件。

解决方案：

1. 对于第一个问题，首先先将上传的文件存到一个数组中，最后再循环上传即可解决。
2. 要解决第二个问题，官方文档并没有提供任何解决方案，因此笔者只能先去读懂该 API 的源码，再进行修改了。经读懂源码后，对源码进行如下修改：
   因此，当每一次上传请求失败后，都会删除列表中对应下标的文件。至于上传成功，则显示在对应的列表上。
   
   当然也可以上传word、pdf、MP3等文件。