2023使用uniapp实现文件上传功能

uniapp是一种基于vue.js框架的跨平台应用开发框架，可以实现一次编写，多平台部署的效果。在实际应用中，文件上传是一个常见的需求，比如说图片上传、视频上传等等。本文将详细介绍如何使用uniapp实现文件上传功能，以及提供具体的代码示例。

实现文件上传的基本思路是：先在前端将选中的文件进行打包，然后发送给后端进行处理。uniapp中可利用官方提供的uni.uploadFile方法实现文件上传。uni.uploadFile方法可以将本地资源上传至远程服务器，上传过程采用分片上传，可实现稳定可靠的文件上传。

实现文件上传功能前，需要先安装uniapp-cli的环境，以及对应的uniapp框架版本。

接下来，我们就来看一下具体代码实现。

前端部分：

在前端页面中，需要设置文件上传的表单，以及设置上传的按钮。代码如下：

1、在HTML页面中设置文件上传表单：

<form>
  <input type="file" id="fileInput" multiple="multiple">
</form>

其中，<input type="file">标签设置了文件上传的入口，在点击上传按钮时，会自动调出系统文件选择对话框。

2、在HTML页面中设置上传按钮：

<button type="button" @click="uploadFile">上传</button>

在按钮上设置@click事件，当用户点击上传按钮时，触发uploadFile函数进行上传操作。

3、在JS文件中编写uploadFile函数：

uploadFile() {
  uni.chooseImage({
    count: 1, // 可上传的图片数量，为1表示单张上传
    success: function (res) {
      uni.showLoading({
        title: "上传中，请稍候..."
      });
      uni.uploadFile({
        url: "http://localhost:8081/upload.php", // 上传接口地址
        filePath: res.tempFilePaths[0], // 上传文件的本地路径
        name: "uploadfile", // 上传文件对应的 key 值
        success: function (result) {
          uni.hideLoading();
          console.log(result);
          uni.showToast({
            title: "上传成功!",
            duration: 2000
          });
        }
      });
    }
  });
}

其中，uni.chooseImage用于打开系统相册，uni.showLoading用于展示上传中的加载框，uni.uploadFile用于发送上传文件的请求。

关于uni.uploadFile具体参数的介绍：

• url：上传接口的地址；
• filePath：上传文件的本地路径；
• name：上传文件的 name 值，后端接口中需要接收该参数；
• success：上传成功后的回调函数。

这样，前端部分的代码就完成了。

后端部分：

在后端，需要处理上传过来的文件信息。这里我们以PHP语言为例，编写相应的处理逻辑。

1、创建upload.php文件，用于上传处理：

<?php
  $uploaddir = './upload/'; //文件上传的目录，需要事先创建好
  $filename = $_FILES['uploadfile']['name']; // 获取上传文件的名称
  $uploadfile = $uploaddir . $filename;
  if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $uploadfile)) { //上传成功
    echo json_encode(array(
      'success' => true,
      'msg' => '上传成功！'
    ));
  } 
  else { //上传失败
    echo json_encode(array(
      'success' => false,
      'msg' => '上传失败！'
    ));
  }
?>

其中，move_uploaded_file函数用于移动临时文件到指定目录。这里上传的文件会被重命名，使用原始文件名可能会产生冲突。需要注意的是，上传目录需要在服务器上提前创建好。

2、启动一个PHP服务，作为后端服务器，监听上传请求。在本地安装xampp或wampserver，启动后，在浏览器中输入localhost/xxx/upload.php即可访问上传服务，其中xxx为upload.php存放的文件夹位置。

这样，后端部分的代码就完成了，可以通过服务器地址将文件上传到指定目录。

总结：

本文介绍了使用uniapp实现文件上传功能的具体步骤，主要包括前端和后端两部分。通过前端设置文件上传表单以及上传按钮，并在JS文件中编写上传函数；后端使用PHP编写上传服务，监听上传请求，将文件上传到指定目录。在前端向后端发送上传请求时，使用uni.uploadFile方法进行文件上传，可以提供稳定可靠的上传服务。