Git Product home page Git Product logo

wx-formdata's Introduction

wx-formdata

在小程序中使用formdata上传数据,可实现多文件上传

用法

跟浏览器中的FormData对象类似 引入js文件

const FormData = require('./formData.js')

new一个FormData对象

let formData = new FormData();

调用它的append()方法来添加字段或者调用appendFile()方法添加文件

formData.append("name", "value");
formData.appendFile("file", filepath, "文件名");

添加完成后调用它的getData()生成上传数据,之后调用小程序的wx.request提交请求

let data = formData.getData();
wx.request({
  url: 'https://接口地址',
  header: {
    'content-type': data.contentType
  },
  data: data.buffer,
});

成员函数

FormData.append()

语法

formData.append(name, value);

参数

参数名 描述
name value中包含的数据对应的表单名称
value 表单的值

FormData.appendFile()

语法

formData.appendFile(name, filepath, fileName);

参数

参数名 描述
name value中包含的数据对应的表单名称
filepath 文件路径
fileName 文件名【可选】

FormData.getData()

语法

let data = formData.getData();

返回值对象属性

属性名 描述
buffer 表单数据的ArrayBuffer对象
contentType http请求Content-Type头部内容

wx-formdata's People

Contributors

macro0000 avatar zlyboy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

wx-formdata's Issues

调用appendFile方法文件名会变成一串ID,建议用wx.chooseMessageFile返回的原始文件名

/外部调用/

wx.chooseMessageFile({
count: 1,
type: "file",
extension: ["txt"],
success(res) {
let filePath = res.tempFiles[0];
let formData = new FormData();
formData.appendFile("filename", filePath);
let data = formData.getData();
console.log(
data,
String.fromCharCode.apply(null, new Uint8Array(data.buffer))
);
}
})

/*formData.js/
this.appendFile = (name, fileObj) => {
let buffer = fileManager.readFileSync(fileObj.path);
if(Object.prototype.toString.call(buffer).indexOf("ArrayBuffer") < 0){
return false;
}
files.push({
name: name,
buffer: buffer,
fileName:fileObj.name// getFileNameFromPath(path)
});
return true;
}

这个项目太棒了!不过遇到了一些小问题

当使用小程序自带的 wx.request 进行 POST 上传图片时,经过验证可以正常上传图片

let formData = new FormData();
formData.appendFile("file", filePath);  // filePath为小程序临时文件路径
let data = formData.getData();

wx.request({
    method: "POST",
    url: 'http://xxxx',
    header: {
        "Content-Type": data.contentType
    },
    data: data.buffer,
})

不过如果换成 noderequest 模块的话,则无法正常上传图片。

请教一下,是我使用方法不正确吗,还是 request 模块本身兼容性的问题呢?

let formData = new FormData();
formData.appendFile("file", filePath);  // filePath为小程序临时文件路径
let data = formData.getData();

const request = require("request");

request({
    method: "POST",
    url: 'http://xxxx',
    headers: {
        "Content-Type": data.contentType
    },
    body: data.buffer,
})

报错如下:

Error: Argument error, options.body.
    at setContentLength (/var/user/node_modules/request/request.js:437:28)
    at Request.init (/var/user/node_modules/request/request.js:442:5)
    at new Request (/var/user/node_modules/request/request.js:127:8)
    at request (/var/user/node_modules/request/index.js:53:10)
    at Promise (/var/user/index.js:7:9)
    at new Promise (<anonymous>)
    at Runtime.exports.main [as handler] (/var/user/index.js:5:12)
    at Runtime.handleOnce (/var/runtime/node10/Runtime.engine.js:218:23)
    at Timeout.setTimeout [as _onTimeout] (/var/runtime/node10/Runtime.engine.js:55:12)
    at ontimeout (timers.js:436:11)

考虑发布一个npm包吗?

项目中也用到了这个功能,看github其他项目直接代码引入了。
正在迁移成ts,配置成一个npm包。

上传文件只传了一部分

你好,在微信小程序使用这个npm包的时候遇到一个问题,上传文件只传了前面一部分

wx.chooseMessageFile({
count: 1,
type: "file",
extension: ["txt"],
success(res) {
const tempFilePaths = res.tempFiles;
let filePath = tempFilePaths[0].path;
let formData = new FormData();
formData.appendFile("filename", filePath, "parameter.txt");
let data = formData.getData();
wx.request({
url: "http://10.168.1.220",
header: { "content-type": data.contentType },
method: "POST",
data: data.buffer,
});
},
});

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.