uni-app 文件上传(非图片) 插件需求

针对您提出的uni-app文件上传（非图片）插件需求，下面是一个使用uni-app原生API进行文件上传的示例代码。这个示例展示了如何在uni-app中实现非图片文件的上传功能，而不依赖于特定的第三方插件。

1. 页面布局（index.vue）

<template>
  <view>
    <button @click="chooseFile">选择文件</button>
    <button @click="uploadFile" :disabled="!file">上传文件</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      file: null,
    };
  },
  methods: {
    chooseFile() {
      uni.chooseMessageFile({
        count: 1,
        type: 'file',
        extension: ['*'], // 允许所有文件类型
        success: (res) => {
          this.file = res.tempFiles[0];
        },
        fail: (err) => {
          console.error('选择文件失败', err);
        },
      });
    },
    uploadFile() {
      if (!this.file) {
        uni.showToast({
          title: '请先选择文件',
          icon: 'none',
        });
        return;
      }

      const uploadTask = uni.uploadFile({
        url: 'https://your-server.com/upload', // 替换为您的服务器上传接口
        filePath: this.file.path,
        name: 'file',
        formData: {
          user: 'test',
        },
        success: (uploadFileRes) => {
          console.log('上传成功', uploadFileRes);
          uni.showToast({
            title: '上传成功',
          });
        },
        fail: (err) => {
          console.error('上传失败', err);
          uni.showToast({
            title: '上传失败',
            icon: 'none',
          });
        },
      });

      uploadTask.onProgressUpdate((res) => {
        console.log('上传进度', res.progress);
        const percent = res.progress * 100;
        // 可以在这里更新上传进度条
      });
    },
  },
};
</script>

<style>
/* 样式可以根据需求自定义 */
</style>

2. 注意事项

• 选择文件：使用uni.chooseMessageFileAPI，设置type为'file'以允许选择非图片文件。
• 上传文件：使用uni.uploadFileAPI，将选择的文件上传到服务器。确保替换url为您的实际服务器上传接口。
• 进度更新：通过uploadTask.onProgressUpdate监听上传进度，可以更新UI以显示进度条。

此示例展示了如何在uni-app中实现非图片文件的上传功能，您可以根据实际需求进一步调整和优化代码。