uni-app 文件选择、文件上传组件（图片，视频，文件等） - 芣苢s 上传请求发送不成功

在处理uni-app中的文件选择、文件上传组件时，如果遇到上传请求发送不成功的问题，通常需要从文件选择、文件处理、请求发送几个环节进行排查。下面是一个包含文件选择、文件处理以及上传请求发送的完整代码示例，希望能够帮助你定位问题。

1. 文件选择组件

首先，在页面的模板部分添加一个文件选择组件：

<template>
  <view>
    <button type="primary" @click="chooseFile">选择文件</button>
    <view v-if="fileList.length">
      <view v-for="(file, index) in fileList" :key="index">
        <text>{{ file.name }}</text>
      </view>
    </view>
  </view>
</template>

2. 文件选择与处理逻辑

在页面的脚本部分处理文件选择逻辑：

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    chooseFile() {
      uni.chooseMessageFile({
        count: 9, // 最多可以选择的文件个数
        type: 'all', // 可以指定类型，如 'image', 'video', 'file' 或 'all'
        success: (res) => {
          this.fileList = res.tempFiles;
          this.uploadFile(res.tempFiles[0]); // 假设上传第一个文件
        },
        fail: (err) => {
          console.error('选择文件失败:', err);
        }
      });
    },
    uploadFile(file) {
      const filePath = file.path;
      const formData = new FormData();
      formData.append('file', {
        uri: filePath,
        name: file.name,
        type: file.type
      });

      uni.uploadFile({
        url: 'https://your-server-url/upload', // 上传接口地址
        filePath: filePath,
        name: 'file',
        formData: formData, // 如果有其他表单数据，可以添加到formData中
        success: (uploadFileRes) => {
          console.log('上传成功:', uploadFileRes);
        },
        fail: (err) => {
          console.error('上传失败:', err);
        }
      });
    }
  }
};
</script>

3. 注意事项

• 确保服务器接口正确接收并处理文件上传请求。
• 检查uni.uploadFile的url是否正确，以及服务器是否支持跨域请求（CORS）。
• 如果上传的是大文件，考虑服务器是否有文件大小限制，以及是否需要分片上传。
• 在uni.chooseMessageFile的type参数中，可以根据需要选择具体的文件类型，如'image'、'video'或'file'。

通过上述代码示例，你可以逐步排查上传请求发送不成功的问题。如果问题依旧存在，建议检查网络请求的具体错误信息，以及服务器端的日志信息。