// 上传文件到接口 url(接口路径)header(请求头)filePath(文件临时路径数组 item为具体临时路径) formData 其他参数 name 参数名称
const uploadall = (url, header,filePath, formData, name) => {
uni.showToast({
icon: 'loading',
title: `正在上传`,
duration: 20000
})
return new Promise((resol, rejec) => {
// 定义Promise集合
const pList = [];
let Header = {
...header,
"Content-Type": 'multipart/form-data' // 设置请求头为 multipart/form-data
}
let formDatafrom = {
userid: uni.getStorageSync('userid') || '',
from: process.env.UNI_FROM,
...formData
}
let data = {
name,
formData: formDatafrom,
}
const requesturl = url ? url : '默认的接口路径' // url为其他接口的路径 这里是为了适配多接口的文件上传
filePath.forEach((item, index) => {
// 多文件上传需要借助Promise.all的执行力,所以利用Promise封装上传功能
const p = new Promise((resolve, reject) => {
uni.uploadFile({
url: process.env.UNI_BASE_URL + requesturl, // process.env.UNI_BASE_URL为接口域名地址 不知道怎么配置的话你也可以直接写死,如:'https://xxxxx.com'
filePath: item,
...data,
header: Header,
success: (uploadFileRes) => {
const res = JSON.parse(uploadFileRes.data) // uploadFile返回的数据格式为json格式,所以需要转换成一下
resolve(res)
},
fail: (error) => {
uni.showToast({
duration: 2000,
icon: process.env.UNI_ERROR,
title: `上传失败`
})
reject(error)
}
});
})
pList.push(p);
})
const imgurls = [] // 这个是接口返回的数据,因为我们接口直接返回的就是文件的线上地址所以我这边在下面直接添加到数组每一项了
Promise.allSettled(pList).then(function(results) {
// 所有上传任务执行成功,results中包含了所有上传成功后响应的数据
console.log(results)
if (url) {
resol(results[0].value)
} else {
results.forEach((item) => {
if (item.value && item.value.result == 'ok') {
imgurls.push(item.value.imageurl)
} else {
if (!storeindex.getters.cheackimgmessage || storeindex.getters
.cheackimgmessage != '没有人脸')
storeindex.commit('setcheackimgmessageInc', item.value
.message || '')
}
})
uni.hideToast()
resol(imgurls)
}
uni.uploadFile单文件上传、多文件上传
最新推荐文章于 2024-05-31 17:16:28 发布
文章描述了一种使用uni-app框架实现的文件上传方法,通过`uploadall`函数,将多个临时文件路径和FormData发送到指定接口,利用Promise.all进行并发上传,并处理上传成功和失败的情况。
摘要由CSDN通过智能技术生成