uniapp怎么上传文件

1. 使用uni.uploadFile方法上传文件

uni.uploadFile是uni-app框架中用于上传文件的方法，支持上传多个文件。该方法需要传入一个对象参数，包括url、filePath、name等属性，来指定上传的文件路径、上传地址和文件名。上传文件时，需要注意以下几点：

uni.uploadFile({
  url: 'http://www.example.com/upload.php', // 上传地址
  filePath: '/path/to/file', // 文件路径
  name: 'file', // 文件名
  success: (res) => {
    console.log('上传成功', res)
  },
  fail: (err) => {
    console.log('上传失败', err)
  }
})

2. 设置请求头和额外参数

在上传文件时，可能需要设置请求头或传递一些额外的参数给后端。可以通过header和formData属性实现。header用于设置请求头信息，formData用于设置额外的参数。

uni.uploadFile({
  url: 'http://www.example.com/upload.php',
  filePath: '/path/to/file',
  name: 'file',
  header: {
    'Content-Type': 'multipart/form-data', // 设置请求头的Content-Type
    'Authorization': 'Bearer ' + token // 设置Token
  },
  formData: {
    'key1': 'value1', // 设置额外的参数
    'key2': 'value2'
  },
  success: (res) => {
    console.log('上传成功', res)
  },
  fail: (err) => {
    console.log('上传失败', err)
  }
})

3. 显示上传进度

在上传文件时，可以实时显示上传进度。uni.uploadFile方法的complete回调函数中可以获取到上传进度信息，从而更新界面上的上传进度条。

uni.uploadFile({
  url: 'http://www.example.com/upload.php',
  filePath: '/path/to/file',
  name: 'file',
  success: (res) => {
    console.log('上传成功', res)
  },
  fail: (err) => {
    console.log('上传失败', err)
  },
  complete: (result) => {
    if (result.statusCode === 200) {
      console.log('上传完成')
    } else {
      console.log('上传失败')
    }
  }
})

4. 总结

使用uni.uploadFile方法可以方便地在uni-app中实现文件上传功能。通过设置url、filePath、name等参数，可以指定上传的文件路径、上传地址和文件名。同时，也可以通过设置header和formData属性来设置请求头和传递额外的参数给后端。使用complete回调函数可以获取上传进度信息，并根据需要更新界面上的进度条等UI元素。通过上述方法，可以满足大部分文件上传需求，并且具有良好的跨平台兼容性。