查看: 969|回复: 0

[DIV/CSS] Js+Node.JS 完成文件上传

发表于 2017-7-22 08:00:02

FormDate 对象使用一些键值对来模拟一个完整的表单,然后使用ajax发送这个 FormData 对象,后端便可以拿到表单中上传的文件。

前端处理 html代码
  1. <form>
  2. <input type="file" id="uploadFile" name="file">
  3. </form>
复制代码

如果只想上传图片:

  1. <input id="uploadFile" type="file" name="file" accept="image/png,image/gif"/>
复制代码

可配置属性:

accept:表示可以选择的文件MIME类型,多个MIME类型用英文逗号分开,常用的MIME类型见下表。 multiple:是否可以选择多个文件,多个文件时其value值为第一个文件的虚拟路径。 常用MIME类型
后缀名 MIME名称
*.3gpp audio/3gpp, video/3gpp
*.ac3 audio/ac3
*.asf allpication/vnd.ms-asf
*.au audio/basic
*.css text/css
*.csv text/csv
*.doc application/msword
*.dot application/msword
*.dtd application/xml-dtd
*.dwg image/vnd.dwg
*.dxf image/vnd.dxf
*.gif image/gif
*.htm text/html
*.html text/html
*.jp2 image/jp2
*.jpe image/jpeg
*.jpeg image/jpeg
*.jpg image/jpeg
*.js text/javascript, application/javascript
*.json application/json
*.mp2 audio/mpeg, video/mpeg
*.mp3 audio/mpeg
*.mp4 audio/mp4, video/mp4
*.mpeg video/mpeg
*.mpg video/mpeg
*.mpp application/vnd.ms-project
*.ogg application/ogg, audio/ogg
*.pdf application/pdf
*.png image/png
*.pot application/vnd.ms-powerpoint
*.pps application/vnd.ms-powerpoint
*.ppt application/vnd.ms-powerpoint
*.rtf application/rtf, text/rtf
*.svf image/vnd.svf
*.tif image/tiff
*.tiff image/tiff
*.txt text/plain
*.wdb application/vnd.ms-works
*.wps application/vnd.ms-works
*.xhtml application/xhtml+xml
*.xlc application/vnd.ms-excel
*.xlm application/vnd.ms-excel
*.xls application/vnd.ms-excel
*.xlt application/vnd.ms-excel
*.xlw application/vnd.ms-excel
*.xml text/xml, application/xml
*.zip aplication/zip
*.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
javascript代码
  1. $('#uploadFile').on('change',function(e){
  2. var file = this.files[0];
  3. var formData = new FormData();
  4. formData.append('file',file);
  5. $.ajax({
  6. url: '/webgl/upload/zip',
  7. type: 'post',
  8. data: formData,
  9. cache: false,
  10. contentType: false,
  11. processData: false,
  12. success: function(res){
  13. //
  14. }
  15. })
  16. })
复制代码

这里我是在文件被选择上传后就会立即触发 ajax 上传文件事件,而表单中其他字段我没有使用 FormData 对象,所以

标签没有添加 enctype="multipart/form-data" 属性。

注:

processData 设置为 false 。因为 data 值是 FormData 对象,不需要对数据做处理。 cache 设置为 false ,上传文件不需要缓存。 contentType 设置为 false 。 nodejs代码 multer模块

我使用了 multer 模块,初始化 multer 模块配置

  1. var storageZip = multer.diskStorage({
  2. destination: function(req, file, cb) {
  3. cb(null, 'public/uploads/zip') //文件存储路径
  4. },
  5. filename: function(req, file, cb) {
  6. cb(null, file.fieldname + '-' + Date.now() + '.zip') //对文件重新命名,防止文件名冲突
  7. }
  8. })
  9. var uploadZip = multer({
  10. storage: storageZip
  11. });
复制代码
路由配置
  1. app.post('/webgl/upload/zip', uploadZip.single('file'), function(req, res) {
  2. res.json(req.file)
  3. })
复制代码
这里 single() 参数名就是使用 FormData.append() 方法添加时的文件名,这里我用的是 file 。 上传结束之后,会把 file 对象返回给前端, file 对象会包含文件名等信息。

来自:https://juejin.im/post/58c64f2b0ce463005479f4d3



回复

使用道具 举报