微信小程序同时上传多个文件(wx.uploadFile)
小程序同时上传多个文件
- 使用递归
- 小程序中导入Multipart.min.js
使用递归
使用递归有一个问题,如果要上传的东西里,其余参数中有些值只能上传一次,比如日期,在第二次上传的时候会显示此日期已经添加,请勿重复添加,这样就会导致只上传成功第一个文件。
//在network.js中封装
export function docxRequest(url,filePaths,i,length,givename,formData) {console.log("我被调用了")requestTimes++wx.showLoading({title: '加载中...',mask: true});return new Promise((resolve, reject) => {wx.uploadFile({url: baseURL + url, //仅为示例,非真实的接口地址(要上传的地址)filePath: filePaths[i],name: givename,formData: formData,header: {'Authorization': "Bearer "+wx.getStorageSync("token"),'content-type': 'multipart/form-data',},success: (res) => {console.log("res",res)resolve(res.data)},fail: (error) => {//客户端网络异常reject(error)wx.showToast({title: '网络异常',duration: 2000,icon: 'none'})},complete:()=>{i++console.log(i,length)if(i == length){console.log("递归结束")requestTimes--if(requestTimes === 0){wx.hideLoading();}}else{// 递归调用console.log("递归调用")requestTimes--docxRequest(url,filePaths,i,length,givename,formData).then(resolve).catch(reject)}}})})}
//在要使用的页面调用
//docUrl内存的是要上传的文件的地址的数组,0代表从数组的第一个值开始上传,params为除了文件地址的其余参数docxRequest(url, docxUrl,0,docxUrl.length,"interview_file", params).then((res) => {console.log("------res", res)var resObj = JSON.parse(res);console.log(resObj)if (resObj.code == 0) {showToast('提交成功')this.getPage()} else {showToast(resObj.msg)}})
小程序中导入Multipart.min.js
Multipart.min.js提取链接:
链接:提取Multipart.min.js
提取码:xxqd
//示例var files = [{name:'key',filePath:img1},{name:'key',filePath:img2}] var fields = [{name:'userId',value:1},{name:'userName',value:'zhangsan'},{name:'time',value:'2023-07-29'}]new Multipart({files,fields}).submit(url,{header: {'Authorization': "Bearer " + wx.getStorageSync("token"),'content-type': 'multipart/form-data',}}).then((res) => {//请求成功console.log(res)console.log(res.data.code)if (res.data.code == 0) {showToast('提交成功')} else {showToast(res.data.msg)}}).catch((e) => {wx.showToast({icon:'none',title: '提交失败'})})
//自己项目使用的代码片段var docxUrl = this.data.docxPathsconsole.log('docxUrl', docxUrl)let fields = Object.keys(params).map(key => ({name: key,value: params[key]})) //将[{username:"zhangsan",age:15}]这样的形式转化为[{username:"zhangsan"},{age:15}]console.log("其余参数", fields)let files = docxUrlconsole.log("附件地址", files)//上传附件files.map((item, index) => {return Object.assign(item, { name: 'interview_file', filePath: item.filePath })}) //将[{filePath:"http://...."},{filePath:"http://..."}]这样的形式转化为[{name:'interview_file',filePath:"http://...."},{name:'interview_file',filePath:"http://..."}],其中name值为wx.uploadFile中的key值//上传图片var uploadImageif (this.data.compressImage.length == 1) {uploadImage = this.data.compressImage.map(tempPath => ({filePath: tempPath})) //将['http://....','hettp://...']这样的数组形式转化为数组里是对象的形式[{filePath:'http://...'},{filePath:'http://...'}]uploadImage.map((item, index) => {return Object.assign(item, { name: 'interview_photo', filePath: item.filePath })})files = files.concat(uploadImage)}console.log("图片和附件", files)new Multipart({files,fields}).submit(url,{header: {'Authorization': "Bearer " + wx.getStorageSync("token"),'content-type': 'multipart/form-data',}}).then((res) => {console.log(res)console.log(res.data.code)if (res.data.code == 0) {wx.hideLoading()showToast('提交成功')this.getPage()} else {showToast(res.data.msg)}}).catch((e) => {})
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
