成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

兩種主流上傳圖片的方法：jQuery+Multer || 原生JS

cnTomato / 1548人閱讀

摘要：原文首發(fā)博主經(jīng)過實踐，這里給出兩種處理用戶上傳圖片的方法，前后端代碼皆有前端后端的中間件提交告訴不要去處理發(fā)送的數(shù)據(jù)告訴不要去設(shè)置請求頭后端代碼用初始化項目之后，新建一個路由文件路由設(shè)置上傳的圖片文件存放的地方為根目錄下的文件夾

原文首發(fā)：https://shuirong.github.io/
博主經(jīng)過實踐，這里給出兩種處理用戶上傳圖片的方法，前后端代碼皆有．

1. 前端jQuery,后端Express的Multer中間件

index.html

fontend.js

function deal(){
    let file = new FormData(document.getElementById("picForm"));
    file.append("CustomField", "This is some extra data");
    $.ajax({
      url: "/update",
      type: "POST",
      data: file,
      processData: false,  /* 告訴jQuery不要去處理發(fā)送的數(shù)據(jù)*/
      contentType: false   /* 告訴jQuery不要去設(shè)置Content-Type請求頭*/
    });
}

backend.js

/*后端代碼：用express初始化項目之后，新建一個路由文件．路由update. update.js */
var express = require("express");
var router = express.Router();
var multer = require("multer");
var upload = multer({
    dest: "uploads/" /*設(shè)置上傳的圖片/文件存放的地方為根目錄下的uploads文件夾*/
});

/*single(fieldName) 中的fieldName必須和HTML中input的屬性name的值一樣*/
router.post("/",upload.single("avatar"),function(req,res,next) {
    console.log(req.file); /* req.file 是 `logo` 文件的信息*/
      console.log(req.body); /* req.body 保存表單文本域數(shù)據(jù), 如果存在的話*/
    res.send("Upload Done !");
});

module.exports = router;

多圖片上傳

和單圖上傳并預(yù)覽基本一個套路．




    
      
      
    

/*其他地方和上面的一樣. update.js*/
router.post("/",upload.array("avatars",3),function(req,res,next) {
    console.log(req.files); /* req.files 是 `avatars` 文件數(shù)組的信息*/
      console.log(req.body); /* req.body 保存表單文本域數(shù)據(jù), 如果存在的話*/
    res.send("Upload Done !");
});

2. 前后端皆原生JS

前端把圖片轉(zhuǎn)換成base64格式，后端再轉(zhuǎn)成二進(jìn)制數(shù)據(jù)（存成圖片）

index.html

fontend.js

inputChange(e) {
  const files = e.target.files[0];
  const reader = new FileReader();
  reader.onload = (ee) => {
    const data = {
      base64: ee.target.result,
    };
    post(this.uploadUrl, data).then((res) => {
      // 根據(jù)返回數(shù)據(jù)做些處理．
    }).catch((err) => {
      console.info("Error", err);
    });
  };
  reader.readAsDataURL(files);
}

/* 這里把xhr的post給封裝了 */
post(url, data) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && (xhr.status < 300 || xhr.status === 304)) {
          resolve(JSON.parse(xhr.responseText));
        } else {
          reject(`XHR unsuccessful:${xhr.status}`);
        }
      }
    };
    xhr.open("post", url, true);
    xhr.setRequestHeader("content-type", "application/json");
    xhr.send(JSON.stringify(data));
  });
}

backend.js

const express = require("express");
const router = express.Router();
const fs = require("fs");

router.route("/")
    .post(upload.single("image"), (req, res) => {
        let base64 = req.body.base64;
        //去掉base64數(shù)據(jù)最前面的＂圖片類型＂字符串
        let type = base64.match(/^data:image/(.+);/)[1];
        base64 = base64.replace(/^data:image/w+;base64,/, "");
        // 解碼base64成二進(jìn)制數(shù)據(jù)．
        let data = new Buffer(base64, "base64");
        const name = `uploads/images/${String(new Date()).replace(/[ :]/g,"").match(/.{6}(.{12})/)[1]}.${type}`;
        fs.open(name, "a", 0644, function(e, fd) {
            if (e) throw e;
            fs.write(fd, data, function(e) {
                if (e) throw e;
                fs.closeSync(fd);
                res.json({
                    "path": name.replace("uploads", ""),
                });
            });
        });

    });

module.exports = router;

PS: 　關(guān)于美化文件上傳按鈕，一個思路就是設(shè)置input的opacity為0，然后在外面包裹一個div．

PPS:　CSS的奇技淫巧還是很多的．

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86990.html

相關(guān)文章

  • Express系列之multer

    摘要：目前覺得對我有用的是和。后者可以在本地調(diào)試頁面，對于手機(jī)頁面尤其有用。這次主要說一下，我并沒有實現(xiàn)所有的功能，只是實現(xiàn)單圖片上傳這一個功能，其他的再摸索嘍。目前就這樣，下次弄出來了多圖片上傳我再接著更新。 這兩天在看《nodejs權(quán)威指南》，這本書看了好久了，但是讀的一直不細(xì)，這次才好好看了一遍。 收獲還是蠻多的，主要在于wenpack使用的一些細(xì)節(jié)問題，有點茅塞頓悟的體驗吧，另外在n...

    Null 評論0 收藏0

  • node.js實現(xiàn)formdata上傳文件

    摘要：對象包含表單的文本域信息，或?qū)ο蟀瑢ο蟊韱紊蟼鞯奈募畔?。是文件的信息前端傳遞的文件類型在中獲取將具有文本域數(shù)據(jù)，如果存在的話。 node.js實現(xiàn)formdata上傳文件 1.關(guān)于formdata XMLHttpRequest Level 2 添加了一個新的接口——FormData。利用 FormData 對象，我們可以通過 JavaScript 用一些鍵值對來模擬一系列表單控件，...

    Aceyclee 評論0 收藏0

  • [ 一起學(xué)React系列 -- 8 ] React中的文件上傳

    摘要：前言本期的主題是在中如何實現(xiàn)文件上傳。文件上傳解決方案目前比較主流的解決方案就是表單或者和表單來實現(xiàn)。文件上傳解決方案表單利用表單組件進(jìn)行文件上傳是遠(yuǎn)古時期就一直在用的方法而且還真經(jīng)久不衰，厲害了。 終于抽出時間來繼續(xù)更新自己的博客，最近忙得夠嗆...對于該系列博客不知道大家有沒有這樣的看法，對于React常見的基礎(chǔ)東西并沒有過多或者詳細(xì)列出，感覺有點不符合系列標(biāo)題。的確，筆者一開始也...

    Travis 評論0 收藏0

  • 一步一步搭建一個圖片上傳網(wǎng)站（后臺服務(wù)器用nodejs）

    摘要：把文件上傳路徑指定到然后用當(dāng)前日期和文件名命名上傳過來的文件。后端利用建立服務(wù)器，利用中間件指定文件路徑。利用這個前端和后端技術(shù)，我們基本上就可以做出一個圖片上傳存儲的基本網(wǎng)站核心。 前幾天看了騰訊云社區(qū)的一個文件上傳的文章文件上傳那些事兒，大體上講了以下h5中圖片上傳的幾個核心原理，但是沒有后端接受的服務(wù)器代碼，沒法做測試。也沒有具體的一個實例都是一些基本的原理片段，并且ui界面也不...

    Darkgel 評論0 收藏0

  • H5拖放+FormData接口+NodeJS，完整異步文件上傳（一）

    摘要：前段時間面試過程中，頻繁遇到異步文件上傳的相關(guān)問題。所以，這會是一個拖放接口實現(xiàn)文件異步上傳的完整。監(jiān)聽放置元素的事件，通過對象可以獲得拖拽事件的狀態(tài)及數(shù)據(jù)。后端文件接收保存后端使用實現(xiàn)文件上傳。 ??前段時間面試過程中，頻繁遇到H5異步文件上傳的相關(guān)問題。還遇到過一個通過H5拖放功能實現(xiàn)文件異步上傳的問題，大概知道H5有新增拖拽功能可以接收文件，如何異步上傳文件就母雞了(攤手)。面試...

    NervosNetwork 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<