uniApp的request封装

Question

uniapp中需要上传图片，是通过formData的形式

let formData = new FormData();
 formData.append("files", this.files);
const res1 = await uploads(formData)

这个是接口的代码

// 附件上传接口
export function uploads(data){
  return upload({
    url: '/sysHotFile/upload',
    method: 'post',
    data
  })
}

如下是封装了不行的请求

import store from '@/store'
import config from '@/config'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import { toast, showConfirm, tansParams } from '@/utils/common'

let timeout = 10000
const baseUrl = config.baseUrl
const upload = config => {
  // 是否需要设置 token
  const isToken = (config.headers || {}).isToken === false
  config.header = config.header || {}
  if (getToken() && !isToken) {
    config.header['Authorization'] = 'Bearer ' + getToken()
  }
  // get请求映射params参数
  if (config.params) {
    let url = config.url + '?' + tansParams(config.params)
    url = url.slice(0, -1)
    config.url = url
  }
  return new Promise((resolve, reject) => {
      uni.uploadFile({
        timeout: config.timeout || timeout,
        url: baseUrl + config.url,
        // filePath: file.path,
        name: config.name || 'file',
        header: Object.assign({}, config.header, {'Content-Type': 'application/x-www-form-urlencoded'}), // 设置请求头
        formData: config.data,
        success: (res) => {
          let result = JSON.parse(res.data)
          const code = result.code || 200
          const msg = errorCode[code] || result.msg || errorCode['default']
          if (code === 200) {
            resolve(result)
          } else if (code == 401) {
            showConfirm("登录状态已过期，您可以继续留在该页面，或者重新登录?").then(res => {
              if (res.confirm) {
                store.dispatch('LogOut').then(res => {
                  uni.reLaunch({ url: '/pages/login/login' })
                })
              }
            })
            reject('无效的会话，或者会话已过期，请重新登录。')
          } else if (code === 500) {
            toast(msg)
            reject('500')
          } else if (code !== 200) {
            toast(msg)
            reject(code)
          }
        },
        fail: (error) => {
          let { message } = error
          if (message == 'Network Error') {
            message = '后端接口连接异常'
          } else if (message.includes('timeout')) {
            message = '系统接口请求超时'
          } else if (message.includes('Request failed with status code')) {
            message = '系统接口' + message.substr(message.length - 3) + '异常'
          }
          toast(message)
          reject(error)
        }
      })
  })
}

export default upload

有没有可以帮忙指导下，这个要怎么修改

Answer 1

yy_demo 下午好🌅🌅🌅
本答案参考ChatGPT-3.5

你的代码中封装的请求是通过uni.uploadFile方法来上传文件的，但目前你遇到了问题。下面是一些解决方案可以帮助你修改代码和解决问题：

1. 检查接口的url是否正确：确保baseUrl和config.url的值正确，可以使用console.log打印出来进行确认。

2. 检查请求头的Content-Type是否正确：根据你的需求，上传文件时应该设置Content-Type为multipart/form-data而不是application/x-www-form-urlencoded。在代码中，你需要将'Content-Type': 'application/x-www-form-urlencoded'修改为'Content-Type': 'multipart/form-data'。

3. 尝试将路径改为本地路径：uni.uploadFile方法的filePath参数应该是文件的本地路径，而不是file.path。确保文件路径正确，如果file.path是一个服务器路径的话，需要先下载到本地再进行上传。

4. 检查后端接口的返回数据格式：根据你的代码中的逻辑，后端应该返回一个JSON字符串。确保后端接口返回的数据是正确的JSON字符串形式，否则可能导致解析失败。

5. 检查错误处理部分的逻辑：在请求失败时，你的代码通过判断error.message的值来确定错误类型。确保你的错误判断逻辑是准确的，可以使用console.log打印出error.message的值来查看具体错误信息。

6. 检查接口调用的权限：确保接口调用的权限正确，是否需要验证登录状态，以及是否需要携带token。你的代码中通过config.headers.isToken来判断是否需要携带token，确保这个逻辑是正确的。

通过修改代码和检查上述问题，你应该能够解决uniApp上传图片的问题。以下是修改后的代码：

// 封装的请求方法
const upload = config => {
  const isToken = (config.headers || {}).isToken === false
  config.header = config.header || {}
  if (getToken() && !isToken) {
    config.header['Authorization'] = 'Bearer ' + getToken()
  }
  if (config.params) {
    let url = config.url + '?' + tansParams(config.params)
    url = url.slice(0, -1)
    config.url = url
  }
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      timeout: config.timeout || timeout,
      url: baseUrl + config.url,
      filePath: config.filePath,
      name: config.name || 'file',
      header: Object.assign({}, config.header, {'Content-Type': 'multipart/form-data'}), // 设置请求头
      formData: config.data,
      success: (res) => {
        let result = JSON.parse(res.data)
        const code = result.code || 200
        const msg = errorCode[code] || result.msg || errorCode['default']
        if (code === 200) {
          resolve(result)
        } else if (code == 401) {
          showConfirm("登录状态已过期，您可以继续留在该页面，或者重新登录?").then(res => {
            if (res.confirm) {
              store.dispatch('LogOut').then(res => {
                uni.reLaunch({ url: '/pages/login/login' })
              })
            }
          })
          reject('无效的会话，或者会话已过期，请重新登录。')
        } else if (code === 500) {
          toast(msg)
          reject('500')
        } else if (code !== 200) {
          toast(msg)
          reject(code)
        }
      },
      fail: (error) => {
        let { message } = error
        if (message === 'Network Error') {
          message = '后端接口连接异常'
        } else if (message.includes('timeout')) {
          message = '系统接口请求超时'
        } else if (message.includes('Request failed with status code')) {
          message = '系统接口' + message.substr(message.length - 3) + '异常'
        }
        toast(message)
        reject(error)
      }
    })
  })
}

// 附件上传接口
export function uploads(data) {
  return upload({
    url: '/sysHotFile/upload',
    method: 'post',
    data
  })
}

export default upload

希望以上解决方案能够帮助到你，如果还有问题，请提供更多详细的错误信息和代码，以便更好地帮助你解决问题。