标签
<input id="upload-file" accept="image/*" type="file" ref="upload" hidden="hidden" onChange={this.upload.bind(this, 1)} />
input标签的type设置为file属性 //属性，支持很多类型，这里设置为只上传图片 /
/隐藏文字，做下面这种效果的时候，就需要隐藏文字。
onChange //上传完成后的回调accepthidden
JS代码
upload() { let files; files = this.refs.upload.files let count = files.length; let formData = new FormData(); for (let i = 0; i < count; i++) { files[i].thumb = URL.createObjectURL(files[i]); formData.append('filedata', files[i]); } }
这里主要是通过 来获取上传之后的文件，然后通过 静态方法创建一个 （mac测试通过 input 上传过来 是空的），然后追加进formData。再通过方法传进后端this.refs.uploadcreateObjectURLDOMStringwebkitRelativePathsend(body: formData)
后端
const express = require('express'); const multiparty = require('multiparty'); const gm = require('gm').subClass({ imageMagick: true }); const fs = require('fs'); router.put(`uploadImages`, function (req, res) { let datas = {}; if (!(fs.existsSync('./images/'))) { fs.mkdir('./images/', function (err, status) { }); } const form = new multiparty.Form({ uploadDir: './images/' }); form.parse(req, function (err, fields, files) { const filesTmp = files.filedata; if (err) { throw err; } else { const relPath = filesTmp; for (let i in relPath) { gm(relPath[i].path) .resize(240, 240) .noProfile() .write(relPath[i].path, function (err, data) { if (err) { throw err; } console.log(data); }); } } }); });
后端用的是node.js，express框架。fs模块，来进行判断是否存在该文件夹，如果不存在，则创建。
返回值为true or false 创建文件夹 multiparty模块来解析form表单
gm 进行裁剪图片。fs.existsSync()fs.mkdir()
错误处理
1、Error: unsupported content-type
这个错误是因为你的content-type设置错了，设置成即可。multipart/form-data
2、设置完成之后，还是不行。
去掉的设置
//body的内容为表单内容headersbody: formData
3、上传一次图片之后，无法上传第二次，是因为value此时有值，没有进行清空处理，在上传成功回调里，进行e.target.value = '';
