圖片裁剪上傳示例（node + react）

時間 2019-11-17

標籤圖片裁剪上傳示例 node react 欄目 React 简体版

原文原文鏈接

場景

由於公司內部平臺很是多，不少開發的站點地址沒有一個統一的入口，因此做者基於 egg + mongodb + redies + umi +antd 搭建了一個簡單的入口平臺。因爲各個平臺各有特色若是能輸入名字的話仍是不太好區分，logo上傳必然是一個必須的功能。一塊兒來看一下整個先後端功能實現的過程。php

node部分

依賴安裝

yarn add  await-stream-ready  stream-wormhole 
複製代碼

await-stream-ready 異步二進制寫入流
stream-wormhole 管道讀入一個蟲洞。

路由聲明

module.exports = app => {
  const { router, controller } = app;
  router.get(‘/api/file/upload’, controller.file.upload)
};
複製代碼

Egg聲明路由css

controller

'use strict';
//node.js 文件操做對象
const fs = require('fs');
//node.js 路徑操做對象
const path = require('path');
//故名思意 異步二進制 寫入流
const awaitWriteStream = require('await-stream-ready').write;
//管道讀入一個蟲洞。
const sendToWormhole = require('stream-wormhole');
//固然你也能夠不使用這個 哈哈 我的比較賴
//還有咱們這裏使用了egg-multipart
const Controller = require('egg').Controller;

class FileController extends Controller {
  async upload() {
    const ctx = this.ctx;
    //egg-multipart 已經幫咱們處理文件二進制對象
    // node.js 和 php 的上傳惟一的不一樣就是 ，php 是轉移一個 臨時文件
    // node.js 和 其餘語言（java c#） 同樣操做文件流
    const stream = await ctx.getFileStream();
    //新建一個文件名
    const filename = stream.filename
    // const filename = md5(stream.filename) + path
    //   .extname(stream.filename)
    //   .toLocaleLowerCase();
    //文件生成絕對路徑
    //固然這裏這樣市不行的，由於你還要判斷一下是否存在文件路徑
    const target = path.join(this.config.baseDir, 'app/public/uploads', filename);
    //生成一個文件寫入 文件流
    const writeStream = fs.createWriteStream(target);
    try {
      //異步把文件流 寫入
      await awaitWriteStream(stream.pipe(writeStream));
    } catch (err) {
      //若是出現錯誤，關閉管道
      await sendToWormhole(stream);
      throw err;
    }
    const url = `/public/uploads/${filename}`
    //文件響應
    ctx.body = { url };
  }
}
module.exports = FileController;
複製代碼

首先 egg-multipart 已經幫咱們處理了二進制對象，在前端發起請求姿式沒有問題的狀況下，後端部分只要調用ctx.getFileStream 就能夠獲得一個流前端

const stream = await ctx.getFileStream();
複製代碼

而後指定寫入的文件夾，注意這邊若是沒有找到文件夾會直接報錯！java

const filename = stream.filename
    //固然這裏這樣市不行的，由於你還要判斷一下是否存在文件路徑
    const target = path.join(this.config.baseDir, 'app/public/uploads', filename);
複製代碼

而後建立一個文件寫入流node

const writeStream = fs.createWriteStream(target);
複製代碼

接下來咱們引用的兩個庫就派上用場了，一個是用來異步完成寫入流，另一個是用來報錯的時候關閉管道，這部分不瞭解的請移步node。react

try {
      //異步把文件流 寫入
      await awaitWriteStream(stream.pipe(writeStream));
    } catch (err) {
      //若是出現錯誤，關閉管道
      await sendToWormhole(stream);
      throw err;
    }
複製代碼

等待文件寫入流結束以後，文件就在目標文件夾下了，就能夠把文件的地址返回給前端mongodb

const url = `/public/uploads/${filename}`
    //文件響應
    ctx.body = { url };
複製代碼

總結

Egg部分已經幫咱們把處理二進制對象處理完了，咱們須要作的事情其實很簡單，拿到文件流，指定寫入的文件夾，建立文件寫入流，等待寫入流結束以後返回文件寫入的地址給前端。canvas

前端部分

依賴安裝

本示例涉及到圖片裁剪，若是沒有這個需求的請略過後端

yarn add react-image-crop
複製代碼

PlatformModal.jsx

upload(上傳模塊)

這裏直接使用的是antd upload的組件，若是你後端部分寫好了，直接貼入代碼，updateUrl 爲你上傳文件的api接口。這邊接口響應以後的格式根據你的狀況定義，拿到的url能夠直接寫在api

<img src={this.state.iconUrl}> 
複製代碼

既可。到了這邊一個圖片上傳的示例就結束了，後面咱們將裁減模塊。

renderUpdate = () => {
    const uploadProps = {
      name: 'icon',
      action: updateUrl,
      onChange: (info) => {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          message.success(`${info.file.name} LOGO 上傳成功！`);
          this.setState({
            iconUrl: info.file.response.data.url,
            crop: {}
          })
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} LOGO 上傳失敗！`);
        }
      }
    }
    return <Upload {...uploadProps}>
      <Button><Icon type="upload" />選擇圖片</Button>
    </Upload>
  }
複製代碼

renderReactCrop(裁減模塊)

圖片裁減部分咱們引用了 react-image-crop 這個react組件，這部分功能的一個思路是這樣的。

圖片地址設置
裁減圖片動做觸發並帶有裁減範圍的參數
經過canvas將圖片根據裁減範圍轉化爲base64
將 base64 數據暫時存起來
在提交的時候，將base64轉化爲文件
經過 formData 建立文件對象提交到後端接口
後端返回新的url地址
更改平臺的圖片地址

import ReactCrop from 'react-image-crop'
import 'react-image-crop/dist/ReactCrop.css'
function getBlobBydataURI(dataURI, type) {
  var binary = atob(dataURI.split(',')[1]);
  var array = [];
  for (var i = 0; i < binary.length; i++) {
    array.push(binary.charCodeAt(i));
  }
  return new Blob([new Uint8Array(array)], { type: type });
}

複製代碼

renderReactCrop = () => {
    const { iconUrl, crop } = this.state
    const loadImage = imgSrc =>
      new Promise((resolve, reject) => {
        const img = new Image()
        img.setAttribute('crossOrigin', 'anonymous')
        img.src = imgSrc
        img.onload = e => {
          resolve(img)
        }
      })

    const cropImage = async (imgSrc, crop) => {
      const img = await loadImage(imgSrc)
      let canvas, cropX, cropY, cropWidth, cropHeight
      // return this.loadImage(imgSrc, cropAfterLoad.bind(this))
      const imageWidth = img.naturalWidth
      const imageHeight = img.naturalHeight
      cropX = (crop.x / 100) * imageWidth
      cropY = (crop.y / 100) * imageHeight
      cropWidth = (crop.width / 100) * imageWidth
      cropHeight = (crop.height / 100) * imageHeight
      canvas = document.createElement('canvas')
      canvas.width = cropWidth
      canvas.height = cropHeight
      const _2d = canvas.getContext('2d')
      _2d.drawImage(img, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight)
      return canvas.toDataURL('image/jpeg')
    }

    const handleCropComplete = (crop, pixelCrop) => {
      cropImage(iconUrl, crop)
        .then(result => {
          message.success('裁剪成功！')
          this.setState({
            iconBase64: result,
            crop,
          })
        })
        .catch(err => {
          message.error(err.message)
        })
    }
    const handleCropChange = (crop) => {
      this.setState({ crop })
    }
    return <ReactCrop
      src={iconUrl}
      onComplete={handleCropComplete.bind(this)}
      onChange={handleCropChange}
      crop={crop}
    />
  }
複製代碼

而後是提交的時候的一個處理方式，將base64 轉化爲一個blob對象，然

將base64 轉化爲一個blob對象
建立一個 formData 用於提交
向fornData裏面添加文件，注意這邊圖片名稱記得帶上時間戳
用fetch向文件上傳接口發起請求
拿到url

const blob = getBlobBydataURI(iconBase64, 'image/png')
        let formData = new FormData();
        formData.append('files', blob, `${name}_${Date.parse(new Date())}_icon.png`)
        fetch(updateUrl, {
          method: 'POST',
          body: formData
        })
複製代碼