Skip to content

Formidable + Node的文件上传 #21

@wuqiong7

Description

@wuqiong7

通过js创建表单

<input type="file" name="myfile" id="myfile" mutiple/>
const formData = new FormData()
formData.enctype='multipart/form-data'
const files = document.getElementById('src').files
const fileArray=[].slice.call(files,0) //类数组转换为数组
fileArray.forEach(file => {
  formData.append('src',file) //循环遍历把文件对象插到formData对象上
})
form.enctype = 'multipart/form-data'

最早的HTTP协议中是不支持文件上传的,
在1995年制定的rfc1867规范中,在HTTP POST请求的内容类型Content-Type中扩展了multipart/form-data类型,
该类型用于向服务器发送二进制数据,以便支持文件的上传

在使用form提交表单数据时,默认的编码格式为application/x-www-form-urlencoded
上传文件时需要通过enctype属性将编码方式设置为multipart/form-data

form.parse(ctx.req, function (err, fields, files) {
  // fields 是普通表单数据 
  // files 是文件数据
})

通过form.on语句将所有上传的文件加入到files里

const files = []
form.on('file', function (filed, file) {
  files.push([filed, file])
})

项目中的代码例子

const pro = new Promise(async (resolve, reject) => {
  const form = new formidable.IncomingForm()
  form.encoding = 'utf-8' // 设置传入表单字段的编码
  form.maxFieldsSize = 1 * 1024 * 1024 // 上传文件大小限制为最大1M  
  form.enctype = 'multipart/form-data'
  form.uploadDir = TMP_PATH // 文件保存在系统临时目录
  form.keepExtensions = true // 使用文件的原扩展名
  form.multiples = true // 设置为多文件上传模式

  form.parse(ctx.req, async (error, fields, files) => {
    if (error) {
      reject(error)
    }

    const options = {
      url: '/api/v1/xxxx',
      method: 'POST',
      formData: _.merge({
        dest: 'upload',
        tenantId,
        userId,
      }, fields),
      json: true,
    }

    // 参数说明 src是按照fileName的顺序一一对应的
    if (files.src) {
      const fileName = []
      options.formData.src = []
      files.src.forEach(item => {
        fileName.push(item.name)
        options.formData.src.push(fs.createReadStream(item.path))
      })
      options.formData.fileName = JSON.stringify(fileName)
    }

    try {
      const rs = await rp(options)
      resolve(rs)
    } catch (e) {
      reject(e)
    }
  })
})

参考链接

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions