[React+Nest.js]仿Antd實現(xiàn)一個圖片上傳的組件

實現(xiàn)效果圖

image
image
image
image
image

功能預(yù)覽

  1. 【less】上傳文件的input框樣式的改造
  2. 獲取圖片列表
  3. 點擊上傳圖片 + 轉(zhuǎn)換成base64
  4. 上傳中l(wèi)oading
  5. 上傳失敗
  6. 刪除圖片
  7. 查看大圖
  8. 下載圖片 + Blob URL
  9. useState 與 useEffect的使用
  10. 跨域
  11. 靜態(tài)文件的查看
  12. 查詢/刪除/添加文件
  13. uuid
  14. 用同步的方式書寫異步的操作（封裝 async await promise集合體）
  15. axios

【前端】React

1.【less】上傳文件的input框樣式的改造

<div className="upload-container item">
    <Icon type="plus" className="icon"/>
    <div className="name">Upload</div>
    <input id="upload-image" 
           type="file" 
           name="image" 
           accept="image/*"
           onChange={()=>handleUploadImage(props)}/>                    
</div>

主要用到的是原生的input框：
type="file"彈出選擇上傳文件的框；
accept="image/*"來限制你選擇上傳的文件只能是圖片類型的；
當(dāng)你彈出選擇文件的框之后，無論是選擇還是取消都會觸發(fā)onChange事件。

原生input上傳文件的樣式很丑，于是換樣式成了重中之重！

思路：
1.把input框給隱藏掉
2.并且要設(shè)置一個與最終樣式同樣大小的寬高，通過子絕父相讓input框覆蓋在最上層，這樣才能夠命中點擊事件

.upload-container{
    margin: 5px;
    padding: 3px;
    float: left;
    border-style: dashed;
    background-color: #f5f5f5;
    position: relative; //父相
    flex-direction: column;

    .icon{
      color: #e1e1e1;
      margin-top: 10px;
      font-size: 40px;
      font-weight: bolder;
    }
    .name{
      color: #a3a3a3;
    }
    input{
      width: 100%;
      height: 100%; // 與父樣式等寬高
      cursor: pointer;
      position: absolute; // 子絕
      top: 0;
      opacity: 0; // 全透明
    }
  }

2. 用同步的方式書寫異步的操作（封裝 async await promise集合體）+ 獲取圖片列表 + useState

const baseUrl = 'http://localhost:8080/image';

const getImageListUrl = `${baseUrl}/list`;

const [list, setList] = useState([]);

const ajax = (url, data={}, type='GET') =>{
    return new Promise((resolve)=>{
        const promise = type === 'GET' ? axios.get(url, {params: data}) : axios.post(url, data)
        promise.then(res=>{
            const data = res.data;
            data.status !== 0 ? message.error(data.msg) : resolve(data);
        }).catch(err => {
            message.error('Network request Error: '+err);
        })
    })
};

const getAndUpdateImageList = async(setList) => {
    const data = await ajax(getImageListUrl);
    setList(data.data);
};

3. 點擊上傳圖片 + 轉(zhuǎn)換成base

出現(xiàn)上傳文件的框，無論是選擇還是取消，都會觸發(fā)onChange事件，所以要判斷你選擇的targetFile是否存在。

通過FileReder將圖片轉(zhuǎn)成base64，用同步的方式將最終結(jié)果拋出去:

const getBase64 = (file) => {
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    return new Promise((resolve)=>{
        fileReader.onload = (data) => {
            resolve(data.target.result)
        }
    })
};

獲取到了base64之后再發(fā)送axios請求到后端：

const handleUploadImage= async ({list,action,uploadImage,setUploadLoading, setUploadErrorFileName})=>{
    const input = document.getElementById('upload-image');
    const targetFile = input.files[0];
    if (targetFile){
        setUploadLoading(true);
        const { name } = targetFile;
        const imageBase64 = await getBase64(targetFile);
        await axios.post(action, {imageBase64, name})
            .then(()=>{
                uploadImage(action + "/" + name);
            }).catch(() => {
                setUploadErrorFileName(name);
            });
        setUploadLoading(false);
    }
};

4. 上傳中l(wèi)oading

當(dāng)我們開始上傳圖片的時候，會將uploadLoading設(shè)置成true，上傳成功之后會將uploadLoading再設(shè)置成false！

const handleUploadImage= async ({list,action,uploadImage,setUploadLoading, setUploadErrorFileName})=>{
    const input = document.getElementById('upload-image');
    const targetFile = input.files[0];
    if (targetFile){
        setUploadLoading(true);
        ...
        setUploadLoading(false);
    }
};

const [uploadLoading, setUploadLoading] = useState(false);

{uploadLoading && renderUploading()}

const renderUploading =()=> (
    <div className="uploading item">
        <Icon className="icon" type='loading' />
        <span>Uploading...</span>
    </div>
);

5. 上傳失敗

與loading其實同理, 其次，上傳失敗之后設(shè)置uploadErrorFileName來渲染失敗的樣式。

await axios.post(action, {imageBase64, name})
            .then(()=>{
                ...
            }).catch(() => {
                setUploadErrorFileName(name);
            });

const [uploadErrorFileName, setUploadErrorFileName] = useState(null);

{uploadErrorFileName && renderUploadError(uploadErrorFileName,setUploadErrorFileName)}

const renderUploadError =(uploadErrorFileName, setUploadErrorFileName)=> (
    <div className="uploading item error">
        <Icon className="icon" type='close-circle' />
        <div className="error-message">Error!</div>
        <div className="name">{uploadErrorFileName}</div>
        <div className="config item">
            <Icon className="delete-icon" type="delete" onClick={()=> setUploadErrorFileName(null)}/>
        </div>
    </div>
);

6. 刪除圖片

const deleteImage = async ({name}, setList)=>{
    await ajax(deleteImageUrl,{name});
    getAndUpdateImageList(setList);
};

7. 查看大圖

用到了Antd的上傳圖片一樣，用到的Modal框去顯示大圖， 用previewSrc保存選擇的結(jié)果

const [previewSrc, setPreviewSrc] = useState(null);

 <Modal
    width={800} 
    className="preview-modal"
    visible={previewSrc !== null}
    title={null}
    footer={null}
    onCancel={()=>setPreviewSrc(null)} >
         <img src={previewSrc} alt=""/>
</Modal>

8. 下載圖片 + blob

思路：
1.用a標(biāo)簽的download屬性來實現(xiàn)下載效果，因為下載按鈕是Icon，所以點擊download Icon之后觸發(fā)a標(biāo)簽的download

2.使用Blob: 使用URL.createObjectURL()函數(shù)可以創(chuàng)建一個Blob URL

<Icon type="download" className="icon" onClick={()=>downloadImage(item, onDownload)}/>
<a id="download-image"  download={item.name}/>

const downloadImage=(item, onDownload)=>{
    const target = document.getElementById('download-image');
    const blob = new Blob([item.src]);
    target.href = URL.createObjectURL(blob);
    target.click();
    onDownload(item);
};

【后端】Nest

1.跨域

app.enableCors();

2.靜態(tài)文件暴露

const app = await NestFactory.create<NestExpressApplication>(AppModule);
  app.useStaticAssets(join(__dirname, '..', 'data/images'), {
    prefix: '/images/',
  });

3.寫文件

  1. 解析base64,生成buffer
  2. fs.writeFile(buffer)
@Post('/image/add')
  getImage(@Req() req, @Res() res): void {
    const {imageBase64, name} = req.body;
    const base64Data = imageBase64.replace(/^data:image\/\w+;base64,/, '');
    const dataBuffer = new Buffer(base64Data, 'base64');
    fs.writeFile(`data/images/${name}`, dataBuffer, (err) => {
      if (err) {
        res.send(err);
      } else {
        res.send({status: 0 });
      }
    });
  }

4.讀文件

fs.readdirSync(文件名)

@Get('/image/list')
  getProductList(@Res() res): void {
    const data = fs.readdirSync('data/images');
    const url = 'http://localhost:8080/images/';
    res.send({
      data: data.map(item => ({
        name: item,
        id: uuid(),
        src: url + item,
      })),
      status: 0,
    });
  }

5.刪文件

fs.unlinkSync(文件名)

  @Get('/image/delete')
  deleteImage(@Query() query, @Res() res): void {
    const files = fs.readdirSync('data/images');
    const target = files.filter(item => item === query.name);
    if (target) {
      fs.unlinkSync('data/images/' + target);
      res.send({status: 0 });
    }
    res.send({status: 1 });
  }

案例

用useEffect代替了didMount請求圖片列表

const [list, setList] = useState([]);

useEffect(() => { 
    getAndUpdateImageList(setList);
},[]);



import React,{useState, useEffect} from 'react';
import UploadImage from "./component/upload-image/upload-image";
import axios from "axios";
import {message} from "antd";

const baseUrl = 'http://localhost:8080/image';

const getImageListUrl = `${baseUrl}/list`;
const addImageUrl = `${baseUrl}/add`;
const deleteImageUrl = `${baseUrl}/delete`;

const ajax = (url, data={}, type='GET') =>{
    return new Promise((resolve)=>{
        const promise = type === 'GET' ? axios.get(url, {params: data}) : axios.post(url, data)
        promise.then(res=>{
            const data = res.data;
            data.status !== 0 ? message.error(data.msg) : resolve(data);
        }).catch(err => {
            message.error('Network request Error: '+err);
        })
    })
};

const getAndUpdateImageList = async(setList) => {
    const data = await ajax(getImageListUrl);
    setList(data.data);
};

const deleteImage = async ({name}, setList)=>{
    await ajax(deleteImageUrl,{name});
    getAndUpdateImageList(setList);
};

const uploadImage = (item, setList) => {
    getAndUpdateImageList(setList);
};

const downloadImage = (item) => {
    console.log('downloadImage', item)
};

function App() {
    const [list, setList] = useState([]);

    useEffect(() => {
        getAndUpdateImageList(setList);
    },[]);

    return (
      <div className="App">
        <UploadImage
            action={addImageUrl}
            list={list}
            onUpload={(item)=>uploadImage(item, setList)}
            onDelete={(item)=>deleteImage(item, setList)}
            onDownload={(item)=>downloadImage(item)}
        />
      </div>
  );
}

export default App;

源碼

https://github.com/shenleStm/Upload-Image

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前端無法像原生APP一樣直接操作本地文件，否則的話打開個網(wǎng)頁就能把用戶電腦上的文件偷光了，所以需要通過用戶觸發(fā)，用...
    AlphaEarth閱讀 517評論 0贊 0
  • 前端無法像原生APP一樣直接操作本地文件，否則的話打開個網(wǎng)頁就能把用戶電腦上的文件偷光了，所以需要通過用戶觸發(fā)，用...
    雷波_viho閱讀 880評論 0贊 1
  • 本組件基于vuejs框架, 使用ES6基本語法, css預(yù)編譯采用的scss, 圖片裁剪模塊基于cropperjs...
    sufaith_dev閱讀 2,717評論 0贊 0
  • 本文轉(zhuǎn)載自博客園博主小火柴的藍色理想。 Blob Blob是計算機界通用術(shù)語之一，全稱寫作：BLOB(binary...
    小小的開發(fā)人員閱讀 1,654評論 0贊 1
  • “斷橋是否下過雪，又想起你的臉，若是無緣再見，白堤柳簾垂淚好幾遍。”這是一首歌的聲音，音樂是掛在樹梢上的流云，一行...
    雁南秋閱讀 2,253評論 5贊 5

友情鏈接更多精彩內(nèi)容