web端 上传图片 到服务器保存【不同方式 ：javaweb、nodejs、django】
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了web端 上传图片 到服务器保存【不同方式 ：javaweb、nodejs、django】，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8677字，纯文字阅读大概需要13分钟。
内容图文
实例
方式一：Nodejs
前端代码：
<input type="file" name="" id="file">
<button onclick="doUpload()">上传文件</button>
<img src="" alt="" id="img">
<script>
function doUpload(){
let file = $("#file").get(0).files[0]; // 获取上传文件的数据
// 将图片转换为 formData对象
let formdata = new FormData()
formdata.append("upload_name",file)
console.log("开始上传~")
$.ajax({
url: "http://localhost:3000/upload",
type: "POST",
cache: false, // 不必须
data:formdata,
processData: false, // 必须
contentType: false,// 必须
success: function(data){
console.log(data);
if(data.err==0){
$("#img").attr("src",data.imgUrl);
}else{
alert("上传失败！")
}
}
})
}
</script>
服务器代码：
const express = require("express");
const request = require('request');
const path = require('path');
const multer = require("multer");
const app = express();
// 配置 multer：缓存
var storage = multer.diskStorage({
// 1. 设置上传后文件的路径，uploads文件夹会自动创建（最好手动建好）
destination:function (req,file,cb) {
cb(null,"./uploads")
},
// 2. 给上传的文件重命名，获取添加后缀名
filename:function (req,file,cb) {
// 前端上传的文件名
let filename = req.body.filename;
var fileFormat = (file.originalname).split(".");
// 给图片加上时间戳，可防止文件名字重复; fileFormat[fileFormat.length - 1]这里-1是取最后的后缀，因为'.'的个数多个
cb(null,file.fieldname + '-' + Date.now() + '.' + fileFormat[fileFormat.length - 1])
}
});
var upload = multer({
storage:storage
});
// 接口：上传图片必须使用post方法
// uploads.single("name") 里面是上传图片的key值，这个必须和前端统一，不然上次不成功
app.post("/upload",upload.single("upload_name"),(req,res)=>{
console.log(req.file);
// 前端上传的文件名
let filename = req.body.filename;
let {size,mimetype,path} = req.file;
let types = ['jpg','jpeg','png','gif']; // 允许上传的文件类型
let tmpType = mimetype.split("/")[1];
if(size>500000){
return res.send({err:-1,msg:"文件太大"});
}else if(types.indexOf(tmpType)==-1){
return res.send({err:-2,msg:"媒体类型错误"});
}else{
let url = `/upload/${req.file.filename}`
res.send({err:0,imgUrl:url});
}
});
// 开启服务器
app.listen(3000,function (request,response) {
console.log("服务器启动~~~");
});
// 开放静态目录（上传图片保存的位置，可以url访问）
let upload_path = path.join(__dirname,"./uploads"); // 实现路径拼接
app.use("/upload",express.static(upload_path));
方式二：Javaweb
前端代码：
<script>
var reader = new FileReader();
reader.readAsDataURL(document.getElementById("product-img-input").files.item(0));
reader.onload = function () {
var productImgBase64 = this.result;
$.ajax({
url: "/ProductAdd",
type: "POST",
dataType: 'json',
data: {"productImg": productImgBase64},
success: function (response) {
console.log("上传成功");
},
});
};
</script>
服务器接收：
import sun.misc.BASE64Decoder;
import sun.misc.BASE64Encoder;
import java.io.*;
public class Base64Utils {
// 函数1：将数据data转成png存到src/image下命名位id.png
public static void saveBase64DataToPng(String data, int id) {
try {
BASE64Decoder decoder = new BASE64Decoder();
String path = Base64Utils.class.getResource("").getPath().split("out/")[0] + "src/images/" + id + ".png";
FileOutputStream write = new FileOutputStream(new File(path));
byte[] decoderBytes = decoder.decodeBuffer(data.split(",")[1]);
write.write(decoderBytes);
write.close();
} catch (Exception e) {
e.printStackTrace();
}
}
// 函数2：根据id找到id.png的图片转成base64返回
public static String PngToBase64(int id) {
InputStream in = null;
byte[] data = null;
String path = Base64Utils.class.getResource("").getPath().split("out/")[0] + "src/images/" + id + ".png";
try {
in = new FileInputStream(path);
data = new byte[in.available()];
in.read(data);
in.close();
} catch (Exception e) {
e.printStackTrace();
}
BASE64Encoder encoder = new BASE64Encoder();
return "data:image/png;base64," + encoder.encode(data).replace("\r\n","");
}
}
方式三：Javaweb
package util;
import com.alibaba.fastjson.JSON;
import model.Result;
import model.Upload_Result;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.util.*;
@WebServlet(name = "uploadPicture", urlPatterns = "/uploadPicture")
public class uploadPicture extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
System.out.println("接收图片----");
if(!ServletFileUpload.isMultipartContent(request)){
throw new RuntimeException("当前文件不支持文件上产");
}
System.out.println("接收图片完成----");
String path = request.getSession().getServletContext().getRealPath("/upload");
System.out.println(path);
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setRepository(new File(path));
factory.setSizeThreshold(1024 * 1024);
ServletFileUpload upload = new ServletFileUpload(factory);
System.out.println(upload);
List<FileItem> items=null;
try {
System.out.println("000000000000----");
items = upload.parseRequest(request);
System.out.println("大小："+items.size());
} catch (FileUploadException e) {
e.printStackTrace();
}
Iterator iter = items.iterator();
String picPath = "";
while (iter.hasNext()) {
System.out.println("111111111111111111111");
FileItem item = (FileItem) iter.next();
if (!item.isFormField()) {
// 根据时间戳创建头像文件
String filename = System.currentTimeMillis() + ".jpg";
System.out.println(request.getContextPath());
//项目下创建文件夹
File f = new File(getServletContext().getRealPath("upload"));
// D盘的存放文件夹
// File f = new File("D://javaWebUploadFile");
if (!f.exists()) {
f.mkdir();
}
String imgsrc = f + "/" + filename;
System.out.println(imgsrc);
// /reports/1551435783395.jpg
picPath = "/upload/" + filename;
// 复制文件
InputStream is = item.getInputStream();
FileOutputStream fos = new FileOutputStream(imgsrc);
byte b[] = new byte[1024 * 1024];
int length = 0;
while (-1 != (length = is.read(b))) {
fos.write(b, 0, length);
}
fos.flush();
fos.close();
} else {
System.out.println(item.getFieldName());
String value = item.getString();
value = new String(value.getBytes("ISO-8859-1"), "UTF-8");
System.out.println(value);
}
}
ArrayList<Object> lst=new ArrayList<>();
Upload_Result result_data=new Upload_Result();
result_data.setFile(picPath);
lst.add(result_data);
Result result=new Result();
result.setCode(0);
result.setMsg("请求成功");
result.setCount(10);
result.setData(lst);
String content= JSON.toJSONString(result);
// 3.发送数据
response.setCharacterEncoding("UTF-8");
//通知浏览器使用utf-8解码
response.setHeader("Content-type", "text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.write(content);
}
}
四、Django
网页表单端加上enctype=“multipart/form-data”
注意：setting.py配置
STATIC_URL = '/static/'
MEDIA_URL = '/media/'
STATICFILES_DIRS=(
os.path.join(BASE_DIR, 'media'),
os.path.join(BASE_DIR,"static"),
)
前端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传图片</title>
</head>
<body>
<form action="/upload/" method="POST" enctype="multipart/form-data">
<input type="file" name="imgFile"><br/><br/>
<input type="submit" value="上传">
</form>
</body>
</html>
后端：
from django.urls import path
from django.shortcuts import render,redirect,HttpResponse
from uploadImg import settings
def get_uploadHtml(request):
if request.method=="GET":
print("获取上传界面~")
return render(request,"upload.html")
def upload_imgFile(request):
if request.method=="POST":
print("前端上传图片")
# 1. 接收图片
imageFile = request.FILES["imgFile"]
print(imageFile)
# 2. 验证图片
contentTypes = ['image/jpeg', 'image/png', 'image/gif','image/bmp']
if imageFile.content_type not in contentTypes:
return HttpResponse('图书格式错误', '请上传图片格式')
# 3. 保存图片
# save_path = '%s%s%s' % (settings.BASE_DIR,settings.MEDIA_URL, imageFile.name) # 绝对路径保存
save_path = 'static/'+ imageFile.name # 相对路径保存
print("save_path：",save_path)
with open(save_path, 'wb+') as f:
f.write(imageFile.read())
return HttpResponse("上传成功，可访问：" + "http://127.0.0.1:8000/" +save_path)
urlpatterns = [
path('gethtml/', get_uploadHtml),
path('upload/', upload_imgFile),
]
访问静态目录：
注意：setting.py配置
下面配置是添加了两个文件夹作为静态目录，但是访问时，都是http://localhost:8000/static/***，都是static开始噢 ！！！然后才是文件名。
STATIC_URL = '/static/'
STATICFILES_DIRS=(
os.path.join(BASE_DIR, 'media'),
os.path.join(BASE_DIR,"static"),
)
内容总结
以上是互联网集市为您收集整理的web端 上传图片 到服务器保存【不同方式 ：javaweb、nodejs、django】全部内容，希望文章能够帮你解决web端 上传图片 到服务器保存【不同方式 ：javaweb、nodejs、django】所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】