小程序: wx.uploadFile上传文件保持原文件名的方法

在微信小程序中,使用wx.uploadFile上传文件时,通过在formData中设置'name'为文件原始名称,可以保持文件上传后的名字不变。本文提供小程序端JS代码示例和服务器端PHP处理代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

其实很简单: formData中携带文件名即可!

废放不说,上源码:

小程序端:

js:

  uploadSendFile(file){                              //file为通过wx.chooseMessageFile选中的文件

    console.log('file:',file);

    wx.uploadFile({

      filePath: file.path,

      name: 'file',

      url: 'https:/........../api/upload.php',      //自己服务端的地址

      header: { "Content-Type": "multipart/form-data","charset": "utf-8" },

      formData: {

        'phoneNumber' : app.globalData.phoneNumber,

        'name' : file.name,                            //file.name为通过wx.chooseMessageFile选中的文件名

      },

      success: function(res){

        console.log('upload-res:',res.data);

      }

    })

  },

服务器端:

PHP: upload.php

<?php
date_default_timezone_set('PRC&
微信小程序中的`uni.uploadFile`和`wx.uploadFile`方法主要用于用户选择并上传单个文件到服务器。如果你想一次性上传多个文件微信小程序本身并不直接支持一次性上传多个文件的功能,这是为了保证用户体验和性能优化。 不过,你可以通过一些技巧实现这个需求: 1. **批量选择文件**:让用户在弹出的选择框中一次选取多个文件,然后在用户点击“上传”按钮后,遍历所选文件列表,逐个调用`uni.uploadFile`或`wx.uploadFile`方法。 ```javascript // 假设files是用户选择的文件数组 for (let file of files) { uploadSingleFile(file); } async function uploadSingleFile(file) { // 这里按照微信小程序API调用上传方法 let result = await uni.uploadFile({ filePath: file.path, // 文件路径 url: 'your-server-url', // 服务器接收文件的URL name: file.name, // 文件名 formData: {}, // 可能需要的表单数据 headers: {} // 可能需要的请求头 }); // 处理上传结果... } ``` 2. **前端合并后再发送**:如果允许后端处理文件合并,可以在客户端将所有文件的内容读取成ArrayBuffer或Blob,然后打包成一个大文件上传。 请注意,上述方案都依赖于服务器端的处理能力,不是微信小程序内置的特性。在实际开发中,最好还是根据项目的具体需求和技术栈来设计最合适的方案。同时,频繁的大文件上传可能会消耗较多网络资源,影响用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值