Web前端最全上传图片的前后端操作_前端上传图片到后端,web开发前景怎么样

最后

一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

Js:
methods:{
//上传文章缩略图
SetArticleCover:function () {
var PicData = new FormData();
PicData.append(‘Content’,this.$refs.selectfile.files[0]);
axios.post(‘/api/UploadImg’, PicData
).then(function (response) {
console.log(response.data.data[0]);
}).catch(function (error) {
console.log(error);
});
}
},


二:后端  
 后端任务是接收图片,返回给前端图片的存储地址。用node.js实现如下:



var Path = require(“path”);
var Formidable = require(“formidable”);
var FS = require(‘fs’);
var Express = express();

//需要使用node.js的Express框架
Express.post(‘/UploadImg’,function (Request,Response) {

//Formidable模块用来接收前端传递过来的formdata
var From = new Formidable.IncomingForm();

//设置保存 文件路径
var TargetFile = Path.join(__dirname, ‘./Public/’);
From.uploadDir = TargetFile;

//parse方法的回调函数中,fields对象为前端formdata append的一般字段,
//files为前端formdata append的图片文件
From.parse(Request,function (err, fields, files) {
if (err) throw err;
var FilePath = files.Content.path; //此处Content为前端formdata append文件的对应字段

var NewPath = Path.join(Path.dirname(FilePath), files.Content.name);
FS.rename(FilePath, NewPath, function (err) {
  if (err) throw err;
  var MyJson = {
    errno: 0,
    data:['http://localhost:8888/' + files.Content.name]
  };
  Response.json(MyJson);
});

});
});


----------------------------------------------------------------------------------------后端用php-----------------------------------------------------------------------------


如果后端语言php,前端使用FileReader方法,详情请移步[此实例详情链接](https://bbs.csdn.net/topics/618166371)  
 前端:



html:

JavaScript:
var selectPics = document.getElementsByClassName(“selectPics”)[0];
var imgArray = [];

//此实例中,选择图片的input,和上传图片的按钮是分开的。在触发上传即此端代码时,下面的imageUpload方法,是绑在input上的已执行完毕
document.getElementsByClassName("right")[0].onclick = function () {
    var picData = new FormData();
    imgArray = JSON.stringify(imgArray);
    picData.append('picInput',imgArray);
    picData.append('txtInput',document.getElementById("addText").value);

    $.ajax(
        {
            url:"http://localhost/proxy/sunq/moningNight/app/addshuoshuo.php",
            type:"POST",
            processData: false,
            contentType:false,
            data:picData,
            datatype:"json",
            success:function (ret) {
                console.log("ajax成功");
                console.log(JSON.parse(ret));
            }
        }
    );
}

/*当input发生改变时,触发此方法。遍历input选中的文件,将文件转成base64字符串存入数组。并将base64转成图片预览*/
function imageUpload(file) {
    var arrayIndex = 0;
    for(var i=0,f;f=file.files[i];i++){
        var fileRader = new FileReader();
        fileRader.readAsDataURL(f);
        fileRader.onload = function (event) {
            imgArray.push(event.target.result);
            drawPic(event.target.result,arrayIndex,imgArray);
            arrayIndex++;
        }
    }
}
/*预览照片。动态生成放图片的div,以及取消图片的按钮。当点击取消时,删掉对应图片以及存base64字符串的数组对应的字符串*/
function drawPic(url,arrayIndex,imgArray) {
    /*动态生成div*/
    var createImgDiv = document.createElement("div");
    createImgDiv.className = "createImgDiv";
    createImgDiv.id = "createImgDiv" + arrayIndex;
    /*动态生成img*/
    var imageElement = document.createElement("img");
    imageElement.src = url;
    /*动态生成取消按钮*/
    var cancelButton = document.createElement("div");
    cancelButton.className = "cancelButton";
    cancelButton.id = "cancelButton" + arrayIndex;

    /*img放在div中*/
    createImgDiv.append(imageElement);
    createImgDiv.append(cancelButton);

    /*放着图片的div放在指定位置*/
    selectPics.prepend(createImgDiv);

    document.getElementById("cancelButton"+arrayIndex).onclick = function () {
        document.getElementById("createImgDiv"+arrayIndex).style.display = "none";
        console.log(arrayIndex);

// imgArray.splice(arrayIndex,1);

JavaScript 和 ES6

在这个过程你会发现,有很多 JS 知识点你并不能更好的理解为什么这么设计,以及这样设计的好处是什么,这就逼着让你去学习这单个知识点的来龙去脉,去哪学?第一,书籍,我知道你不喜欢看,我最近通过刷大厂面试题整理了一份前端核心知识笔记,比较书籍更精简,一句废话都没有,这份笔记也让我通过跳槽从8k涨成20k。

JavaScript部分截图

如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

g.cn/img_convert/cac778dc45492a41e2f3e7cd6b0134e5.png)

如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值