Uniapp中如何上传非图片和录音文件

# Uniapp中如何上传非图片和录音文件

在日常的移动端应用中，用户经常需要上传非图片和录音文件，如PDF、文档等文件。这时候我们就需要使用Uniapp提供的文件上传API来实现。

## 1. 准备工作

在使用Uniapp提供的文件上传API前，我们需要准备以下工作：

1. 在manifest.json文件中添加文件读取权限：

"android": {
  "permission": [
    "android.permission.READ_EXTERNAL_STORAGE",
    "android.permission.WRITE_EXTERNAL_STORAGE"
  ]
},

2. 添加依赖：

import uniRequest from 'uni-request';

3. 在需要使用上传功能的页面中，引入input组件，并添加ref属性：

<view>
  <input type="file" accept="*" ref="fileInput" @change="uploadFile" hidden></input>
  <button @click="openFileInput">上传文件</button>
</view>

## 2. 上传文件

### 2.1 选择文件

在页面中添加一个按钮，通过点击按钮来触发选择文件的操作。

<button @click="openFileInput">上传文件</button>

在页面的methods中添加openFileInput方法：

openFileInput() {
  this.$refs.fileInput.click();
},

该方法通过获取到input组件的引用，来模拟用户点击选择文件的操作。

### 2.2 上传操作

当用户选择完文件后，会触发input组件的change事件，我们可以在change事件中获取到用户选择的文件，并进行上传操作。

<input type="file" accept="*" ref="fileInput" @change="uploadFile" hidden></input>

在页面的methods中添加uploadFile方法：

uploadFile(event) {
  const file = event.target.files[0];
  const formData = new FormData();
  formData.append('file', file);
  uni.showLoading({
    title: '上传中',
  });
  uniRequest.post('https://example.com/upload', formData).then((res) => {
    uni.hideLoading();
    uni.showToast({
      title: '上传成功',
    });
  }).catch((err) => {
    uni.hideLoading();
    uni.showToast({
      title: '上传失败',
    });
  });
},

该方法首先获取到用户选择的文件，并通过FormData来构造上传文件的数据。然后通过uniRequest.post方法向服务器提交上传请求，上传的url地址应根据实际需求而定。

上传成功后，我们可以通过uni.showToast方法来提示用户上传成功，上传失败同理。

## 3. 总结

通过以上步骤，我们就可以在Uniapp中实现文件上传功能了。需要注意的是，上传非图片和录音文件时，需要添加accept="*"这个属性，表示接受所有类型的文件。

完整代码如下：

<template>
  <view>
    <input type="file" accept="*" ref="fileInput" @change="uploadFile" hidden></input>
    <button @click="openFileInput">上传文件</button>
  </view>
</template>
<script>
import uniRequest from 'uni-request';
export default {
  methods: {
    openFileInput() {
      this.$refs.fileInput.click();
    },
    uploadFile(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('file', file);
      uni.showLoading({
        title: '上传中',
      });
      uniRequest.post('https://example.com/upload', formData).then((res) => {
        uni.hideLoading();
        uni.showToast({
          title: '上传成功',
        });
      }).catch((err) => {
        uni.hideLoading();
        uni.showToast({
          title: '上传失败',
        });
      });
    },
  },
};
</script>