标签：console log img nodejs res JavaScript file var 完整版

html文件

<input type="file" id="file" multiple>
  <button id="but">提交</button>
  <form action="http://localhost:3000/upload" enctype="multipart/form-data" method="POST">
    <input type="file" name="file" multiple>
    <button type="submit">提交</button>
  </form>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var file = document.getElementById('file')
    var but = document.getElementById('but')
    var body = document.body
    var li; // 保持form 信息
    but.onclick = function () {
      axios({
             url: 'http://localhost:3000/upload',
             data: li,
             method: 'post',
             headers: {
               "content-type": "multipart/form-data"
             }
           }).then(x => {
             console.log(x)
           })
    }
    file.onchange = function (list) {
      console.log(list.target.files)
      console.log(Array.from(list.target.files))
      var fileObjList = Array.from(list.target.files)
      var listUpl = []
      var form = new FormData()
      
            let arr = Array.from(list.target.files)
           for(var i=0;i<arr.length;i++){
             console.log(arr[i])
            form.append('file',arr[i])//file注意多文件格式 单文件file不需要循环
           }
           console.log(form.getAll('file'))
           li = form
      fileObjList.map((res, index) => {
        console.log(new Blob([res], {type: res.type}))
        listUpl[index] = new Blob([res], {type: res.type})
      })
      listUpl.map(upl => {
        var img = document.createElement('img')
        img.src = URL.createObjectURL(upl)
        img.setAttribute('width', '100px')
        img.setAttribute('height', '100px')
        body.appendChild(img) // blob显示
        var a = document.createElement('a')
        a.setAttribute('download', fileObjList[index].name)
        a.setAttribute('href', URL.createObjectURL(upl))
        a.click()
      })
      listUpl.map(upl => {
        var read = new FileReader()
        read.readAsDataURL(upl)
        read.onload = function (data) {
          var img = document.createElement('img')
        img.src = data.target.result
        img.setAttribute('width', '100px')
        img.setAttribute('height', '100px')
        body.appendChild(img) // base64显示
        var a = document.createElement('a')
        a.setAttribute('download', fileObjList[index].name)
        a.setAttribute('href', data.target.result)
        a.click()
        }
      })
    }
  </script>

nodejs main.js文件如下

var express = require('express')
var app = express();
var fs = require('fs');
var mul = require('multiparty')
app.all('*',(req, res， next) => {
	res.setHeader('Access-Control-Allow-Origin', '*');
	next();
})
app.post('/upload', (req, res) => {
	var form = new mul.Form({uploadDir: './public/'})
	form.parse(req, (err, field , files) => {
		if (err) return
		console.log(files)
		if(Array.isArray(files.file).length > 0) {
			files.file.map(res => {
				fs.rename(res.path, './public/' + res.originalFilename, (err) => {
					console.log(123)
				})
			})
		}
		res.json({ok: 200})
	})
})
http.listen(3000, () => {
  console.log('listening on *:3000');
});

标签：console,log,img,nodejs,res,JavaScript,file,var,完整版
来源： https://blog.csdn.net/qq_43505774/article/details/111031034

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。