uniapp上传多个文件

3,550 阅读1分钟

一、遇到的问题

开发过程中,使用uni.uploadFile上传多个文件时,在浏览器上运行能上传成功,真机运行时死活没反应
于是就同后端小伙伴一起找问题,找啊找,找啊找,终于解决了
真的太坑*(真的想爆粗口,啊啊啊啊啊啊啊啊啊🤬)了

二、一定要仔细阅读文档

文档地址:uniapp.dcloud.net.cn/api/request…

写这篇文章时才发现文档上写的清清楚楚,明明白白的😂

参数说明:

image.png

一定要注意这个参数!!!

image.png

三、具体实现

1、前端

uni.showLoading({
    title: '上传中'
})
let temp = []
fileList.forEach((file, index) => {
    temp.push({
        // name和uri的传参是重点,一定要注意!!!
        name: 'files' + index,
        file: file,
        uri: file.url
    })
})
batchUpload(temp).then(res => {
   console.log('上传成功', res)
}).finally(_ => {
    uni.hideLoading()
})
/**
 * 上传多个文件
 */
export function batchUpload(files) {
    return uploadFile({
        url: `${fsPrefix}/obsFileInfo/appBatchUpload`,
        files
    })
}
// files和filePath选其一
export const uploadFile = ({
    url = '',
    files = [],
    filePath = '',
    name = 'file',
    formData = {},
}) => {
    let apiUrl = config.baseUrl + url
    let header = {}
    if (getStorage('token')) {
        header.Authorization = getToken()
    }
    return new Promise((resolve, reject) => {
        uni.uploadFile({
            header,
            url: apiUrl,
            files,
            filePath,
            name,
            formData,
            success: (uploadFileRes) => {
                successHandle(uploadFileRes, resolve, reject, 'uploadFile')
            },
            fail: uploadFileErr => {
                uni.showToast({
                    icon: 'none',
                    title: '请求接口失败'
                })
                reject(uploadFileErr)
            }
        })
    })
}

// 接口成功处理
const successHandle = (res, resolve, reject, type) => {
    let {
        statusCode,
        data
    } = res
    if (type === 'uploadFile') {
        data = JSON.parse(data)
    }
    if (statusCode === 200) {
        if (data.status === 2) {
            // 业务数据被删除了
            resolve(data)
        } else if (data.status === 0) {
            // 返回正常
            resolve(data.data)
        } else {
            // 返回异常
            data.message && uni.showToast({
                icon: 'none',
                title: data.message
            })
            reject(data)
        }
    } else {
        if (statusCode === 401) {
            // 跳转到登录页面
            removeStoragePart()
            uni.reLaunch({
                url: '/pages/login/login'
            })
            uni.showToast({
                icon: 'none',
                // title: data.message
                title: '该用户已在其他端登录系统,请重新登录。'
            })
        }
        reject(data)
    }
}

2、后端

ff4accbf8c5b95b7bf24230ae5d5de6.png

4d6f14eec2db17aaae7001aea266aa7.png