利用Antd 的 Upload組件實現文件上傳七牛雲

首先咱們的需求大概是這樣的，咱們須要使用Antd的Upload組件將上傳的文件傳到七牛雲上面，而後讓七牛那邊返回一個url便可。

在進行操做的以前能夠先參考一下七牛那邊的SDK文檔:Node SDK.

完成需求的流程大概是下面這樣:

• 先獲取到七牛那邊的提供的一個token值
• 而後將文件上傳到七牛那邊提供的一個url上面(一個post接口，要附帶以前token提交上去)
• 拿到返回的url地址便可

這裏使用的框架是react，版本號是16.9.0。因此這裏使用的是函數式組件來進行實現。

先安裝一波依賴

npm install qiniu -S
複製代碼

而後新建一個qiniu.js的文件，用來獲得七牛那邊的token值

import qiniu from 'qiniu';
import { Qiniu } from '../../secret';

qiniu.conf.ACCESS_KEY = Qiniu.AK;
qiniu.conf.SECRET_KEY = Qiniu.SK;
// 七牛那邊的對應的bucket名稱
const bucket = '';

export const getToken = () => {
    const putPolicy = new qiniu.rs.PutPolicy({
        scope: bucket
    })
    return putPolicy.uploadToken();
}
複製代碼

而後相對應的secret.js用來存儲我的七牛的倉庫的SK和AK。

其中secret.js的代碼大體爲這樣(相關的SK和AK填寫本身七牛雲對應便可):

export const Qiniu = {
    AK:'',
    SK:''
}
複製代碼

這個文件上傳的時候放在.gitignore裏面就能夠了。或者項目有CI支持的話，能夠先用CI對文件進行一個加密也能夠。

過程大概是這樣,在使用upload進行組件的上傳的時候，先使用beforeUpload獲取到本次上傳所須要的token值，而後把token填在上傳的data裏面,而後上傳到七牛對應的QINIU_SERVER那邊去，這樣最後那邊上傳以後返回的url,上面這些過程都是利用Upload自己所提供的API來完成。具體實現過程能夠參考下面的demo。

import React, { useState, Fragment } from "react";
import { Form, Upload, Modal, Icon } from "antd";
import { getToken } from "utils/qiniu";

// 七牛默認的上傳地址(即爲post接口)
const QINIU_SERVER = "http://upload.qiniup.com";
// bucket綁定的URL
const BASE_QINIU_URL = "";
const FormItem = Form.Item;

function Demo(props) {
  const { getFieldDecorator } = props.form;
  // 用來預覽彈出預覽圖片的Modal框框
  const [previewVisible, setPreviewVisible] = useState(false);
  const [previewImage, setPreviewImage] = useState("");
  // 存儲七牛返回的token值
  const [token, setToken] = useState("");
  // 存取上傳七牛返回的值
  const [fileList, setFileList] = useState([]);
  // antd form表單的一個排版設計
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 }
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 }
    }
  };
  // 預覽
  const handlePreview = file => {
    setPreviewImage(file.url || file.thumbUrl);
    setPreviewVisible(true);
  };
  const handleChange = ({ file, fileList }) => {
    const { uid, name, type, thumbUrl, status, response = {} } = file;
    const fileItem = {
      uid,
      name,
      type,
      thumbUrl,
      status,
      url: BASE_QINIU_URL + (response.hash || "")
    };
    fileList.pop();
    fileList.push(fileItem);
    // 這裏必需要用展開運算符，不然會有error，具體能夠參考antd文檔
    setFileList([...fileList]);
  };

  const getUploadToken = () => {
    const token = getToken();
    setToken(token);
  };

  const uploadButton = (
    <div>
      <Icon type="plus" />
      <div className="ant-upload-text">上傳</div>
    </div>
  );
  return (
    <Fragment>
      <Form>
        <FormItem label="上傳文件 " {...formItemLayout}>
          {getFieldDecorator("scwj", {
            rules: [
              {
                required: false
              }
            ]
          })(
            <>
              <Upload
                action={QINIU_SERVER}
                data={{ token }}
                listType="picture-card"
                beforeUpload={getUploadToken}
                fileList={fileList}
                onPreview={handlePreview}
                onChange={handleChange}
              >
                {fileList.length >= 1 ? null : uploadButton}
              </Upload>
            </>
          )}
        </FormItem>
      </Form>
      <Modal visible={previewVisible} footer={null} onCancel={handleCancel}>
        <img style={{ width: "100%" }} src={previewImage} alt="previewImg" />
      </Modal>
    </Fragment>
  );
}

export default Demo;
複製代碼