ajax怎么获取tk框架里上传的图片,ajax上传文件nodejs获取图片时不能显示怎么办?...

html>

上传文件

文件:

文件名类型大小(/kb)上传下载

let files=document.getElementById('fileList'),

content=document.getElementById('content'),

arr=['name','type','size'],

index=0;

fileArr=[];//存储文件

files.οnchange=function(event){

let files=this.files,

len=files.length;

if(len){

for(let f=0;f

let file=files[f],

tr = content.insertRow(index++);

for (let x = 0; x 

let td = tr.insertCell(x);

if(x>=arr.length){

if(x==3)td.innerHTML='上传';

if(x==4)td.innerHTML='下载'

}else{

td.innerHTML = file[arr[x]];

}

}

fileArr.push(file);

}

}

}

function up(){

let index=(event.target.id)-1,

data=fileArr[index],

url='http://localhost:7000/upload';

ajax({

url:url,

data:data

})

}

ajax页面

function ajax(obj) {

let {url,data}=obj;

if (XMLHttpRequest)

xhr = new XMLHttpRequest();

else if (ActiveXObject){

xhr = new ActiveXObject('Micorsoft.HTTP');

}

xhr.open('post', url, true);

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

//xhr.send(data);

let reader = new FileReader(), type = data.type;

console.log(type)

if (data.type.indexOf('text') > -1)//文本文件

reader.readAsText(data);

else if (data.type.indexOf('image') > -1)//图片文件

reader.readAsDataURL(data);

reader. = function () {

xhr.send(`name=${data.name}&type=${data.type}&file=${reader.result}`);

}

xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {

if (xhr.status == 200 || xhr.status == 304) {

alert(xhr.responseText)

}

}

}

}

const express = require('express'),

bodyparser = require('body-parser'),

fs = require('fs'),

app = express();

app.use(bodyparser.json({ limit: '50mb' }));

app.use(bodyparser.urlencoded({ limit: '50mb', extended: true }));

//判断目录是否存在

let url = __dirname + '/temp_up/';

fs.exists(url,(exists)=>{

if(!exists)fs.mkdir(url);

})

app.post('/upload', (req, res) => {

res.setHeader("Access-Control-Allow-Origin", "*");

let {name,type,file}=req.body;

if (type.includes('text')){

fs.writeFile(url+name,file,'utf-8',(err)=>{

if(err)console.log('写入失败!')

})

}else if(type.includes('image')){

file = file.substring(23);

fs.writeFile(url+name, file, 'base64', (err) => {

//没有报错,图片不正显示,why???

if (err) console.log(err)

})

}

res.send('success!')

})

app.listen(7000, () => {

console.log('server running on 7000....');

})

//重点在服务端代码中,图片文件读取后写入文件显示不出来,怎么办????

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值