[Резюме практики] Освободитесь от оков и осуществите пакетную загрузку

предисловие

Это краткое изложение практики разработки пакетной загрузки файлов в программах WeChat Mini. Загрузка файлов звучит очень неприметно, даже добавить слово пакет не кажется сложным, но эта обычная дорога кажется немного крутой, когда проложена по мини-программам WeChat.

запускать

WeChat по-прежнему очень удобен и предоставляет некоторые методы, связанные с сетью. вwx.uploadFileИспользуется для загрузки локальных ресурсов на сервер.

// 微信官方例子

wx.chooseImage({
  success (res) {
    const tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData: {
        'user': 'test'
      },
      success (res){
        const data = res.data
        //do something
      }
    })
  }
})

• Атрибут filePath Тип Строка Временный путь или сетевой путь к файлу, который нужно загрузить. Не тип массива, очевидно, не может загружать несколько одновременно. (Сожалеть)
• Атрибут formData имеет тип Object , который используется для других дополнительных данных формы в HTTP-запросе (Примечание: новые данные формы нельзя использовать в апплете).

Следовательно:

Можно ли инкапсулировать путь к файлу в объект в качестве параметра formData для пакетной загрузки?

Результат тоже, к сожалению, мы получаем только кучу строк адресов временных файлов на стороне сервера. (смущение)

Почему параметр filePath в порядке, а не formdata?

Причина: WeChat внутренне преобразует адрес временного файла filePath в фактический бинарный файл и передает его на сервер, но в formData он не будет обрабатываться таким образом, а будет обрабатываться и загружаться как определенный тип данных.

проводить исследования

С менталитетом попробовать, я снова посмотрелwx.requestМетод, перечитав его бесчисленное количество раз, все еще отчаянный, кажется, что он не так хорош, как wx.uploadFile, даже файл не может быть загружен.

Депрессивный, беспомощный, почему так происходит, WeChat забыли или есть другие причины его ограничить. (Инсайдеры видят это здесь, надеясь дать разумное объяснение.)

Рассвет

Перенесите дух технологии Куайгоу, никогда не сдавайся и никогда не сдавайтесь и продолжайте искать вверх и вниз.

Поскольку есть брандмауэр, мы можем только пересечь лестницу!

идеи

1. Сначала конвертируйте файл в декодируемый формат.
2. Упакуйте и загрузите несколько закодированных строк вместе.
3. Сервер декодирует и записывает на жесткий диск в соответствии с согласованным форматом кодирования.

исходный код

кодировка файла

const fileSystemManager = wx.getFileSystemManager()

fileSystemManager.readFile({
        filePath: filePath, // 例如图片临时路径
        encoding: 'base64',
        success (res) {
          let { data } = res // 编码后的数据
        }
      })

инкапсуляция данных

let fileList = [data1, data2, data3]

загрузить

wx.request({
  url: 'kuaigou/fe/api', 
  data: {
    fileList: fileList
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

Сервер (узлы)

let decodeImg = Buffer.from(data, 'base64') // data 为编码的数据

  fs.writeFile('path', decodeImg, 'base64').then((data => {
      console.log('data:suc', data)
    
    })).catch(err => {
      console.error('data:err', err)
    })

полный код

github

постскриптум

Это, пожалуй, самый незаметный из многих способов.

Читатели могут публиковать больше и лучшие методы.

Подписывайтесь на нас