uniapp上传多个文件

• 官方文档地址：uni.uploadFile(OBJECT) | uni-app官网

• 业务需求：做了一个类似朋友圈的功能，接口不仅要支持上传多个文件，同时还需要携带一些信息

• 前端代码示例

  • 上传按钮和新增朋友圈数据

    <template>
    	<view>
        	<input v-model="newPost.title" placeholder="输入标题"/>
        	<view>
            	<view v-for="(img, index) in newPost.fileList" :key="index">
                	<image :src="img" mode="aspectFill"></image>
        		</view>
            </view>
            <view @tap="chooseImage" v-if="newPost.fileList.length < 9">
                <text>添加图片</text>
        	</view>
        	<button class="publish-btn" @tap="publishPost">发布</button>
        </view>
    </template>
    
    <script>
        import recordApi from '@/api/record/record.js'
        export default {
            data() {
                return {
                    newPost: {
                        title: '',
                        fileList: [],
                    },
                }
            },
            methods: {
                chooseImage() {
    				uni.chooseImage({
    					count: 9 - this.newPost.fileList.length,
    					success: (res) => {
    						this.newPost.fileList = [...this.newPost.fileList, ...res.tempFilePaths]
    					}
    				})
    			},
            }
        }
    </script>

  • 发布按钮逻辑

    publishPost() {
        uni.showLoading({
            title: '发布中...'
        })
    
        let files = []
        this.newPost.fileList.forEach((file, index) => {
            files.push({
                // 获取文件名
                name: file.split('/').pop(),
                file: file,
                // uri必传,否则真机运行时无反应
                uri: file + ''
            })
        })
    
        let data = {}
        data.title = this.newPost.title
        recordApi.addDailyRecord(data, files).then(res => {
            uni.hideLoading()
            uni.showToast({
                icon: 'none',
                title: '发布成功'
            })
        })
    },

  • @/api/record/record.js的addDailyRecord方法如下（因为uni.uploadFile不会自动将需要的cookie设置进去，所以下面手动设置了一下）

    function addDailyRecord(data, files) {
        let satoken = uni.getStorageSync("satoken");
        return new Promise((resolve, reject) => {
            uni.uploadFile({
                url: 'http://你的后端ip:8080/record/addDailyRecord',
                files: files,
                formData: data,
                header: {
                    'Cookie': 'satoken=' + satoken
                },
                success: (response) => {
                    resolve(responseData)
                },
                fail: uploadFileErr => {
                    uni.showToast({
                        icon: 'none',
                        title: '发布失败'
                    })
                    reject(uploadFileErr)
                }
            })
        })
    }

• 后端代码示例

  @SaIgnore
  @PostMapping(value = "/addDailyRecord", consumes = "multipart/form-data")
  public R addDailyRecord(MultipartRequest multipartRequest) {
      iRecordService.addDailyRecord(multipartRequest);
      return R.success();
  }

  @Override
  public void addDailyRecord(MultipartRequest multipartRequest) {
      List<MultipartFile> files = new ArrayList<>();
  
      // 获取所有文件
      Set<String> fileKeySet = multipartRequest.getFileMap().keySet();
      for (String fileKey : fileKeySet) {
          List<MultipartFile> filer = multipartRequest.getMultiFileMap().get(fileKey);
          files.addAll(filer);
      }
      // 获取所有参数
      Map<String, Object> parameterMap = new HashMap<>();
      Set<String> parameterKeySet = ((StandardMultipartHttpServletRequest) multipartRequest).getParameterMap().keySet();
      for(String parameterKey : parameterKeySet) {
          String[] parameterValues = ((StandardMultipartHttpServletRequest) multipartRequest).getParameterMap().get(parameterKey);
          parameterMap.put(parameterKey, parameterValues[0]);
      }
  }

参考文档

• uniapp上传多个文件开发过程中，使用uni.uploadFile上传多个文件时，在浏览器上运行能上传成功，真机运行时 - 掘金
• uni-app uni.uploadFile，真机上传不生效解决_uni.uploadfile 安卓不生效-CSDN博客