antd上傳圖片到阿里云的oss服務(wù)器

在使用antd的時(shí)候可以很方便的實(shí)現(xiàn)上傳圖片的功能啤覆,但是最近使用到阿里云的oss服務(wù)器存儲(chǔ)文件數(shù)據(jù)山孔,比較坑爹的事情就來(lái)了狞贱。雖然阿里云的官網(wǎng)文檔描述的非常詳細(xì)澈缺,但是感覺(jué)太詳細(xì)了導(dǎo)致很難找到重點(diǎn)草戈,一個(gè)上傳圖片的功能折騰了好久(可能自己比較菜吧)塌鸯。
使用dva初始化一個(gè)空白的項(xiàng)目,安裝antd插件唐片。

dva new upload-app
cd upload-app
npm i antd

引入antd的樣式文件

// index.js中
import 'antd/dist/antd.css';

首先上傳圖片建議使用網(wǎng)上的幾個(gè)npm包ali-oss丙猬,安裝方式如下

npm i ali-oss          # oss功能封裝
npm i moment           # 為每一天的上傳文件創(chuàng)建目錄

為了省事直接在dva框架中的Example組件中實(shí)現(xiàn)效果。

// components/Example.js
import React from 'react'
import { Upload, Icon, message } from 'antd';
import oss from 'ali-oss';
import moment from 'moment';
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

const client = (self) => {
  const {token} = self.state
  console.log(token);
  // 當(dāng)時(shí)使用的插件版本為5.2
  /*
  return new oss.Wrapper({
    accessKeyId: token.access_key_id,
    accessKeySecret: token.access_key_secret,
    region: '', //
    bucket: '',//
  });
  */
  // 2018-12-29更新
  // ali-oss v6.x版本的寫法
  return new oss({
    accessKeyId: token.access_key_id,
    accessKeySecret: token.access_key_secret,
    region: '', //
    bucket: '',//
  });
}

const uploadPath = (path, file) => {
  // 上傳文件的路徑费韭,使用日期命名文件目錄
  return `${moment().format('YYYYMMDD')}/${file.name.split(".")[0]}-${file.uid}.${file.type.split("/")[1]}`
}
const UploadToOss = (self, path, file) => {
  const url = uploadPath(path, file)
  return new Promise((resolve, reject) => {
    client(self).multipartUpload(url, file).then(data => {
      resolve(data);
    }).catch(error => {
      reject(error)
    })
  })
}

class Example extends React.Component {
  state = {
    loading: false,
    token: {
      access_key_id: '', // oss的key_id
      access_key_secret: '', // oss的secret
      OSS_ENDPOINT: '',  // 自己oss服務(wù)器的配置信息
      OSS_BUCKET: '', // 自己oss服務(wù)器的配置信息
    }
  };
  handleChange = (info) => {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl => this.setState({
        imageUrl,
        loading: false,
      }));
    }
  }
  beforeUpload = (file) => {
    const isJPG = file.type === 'image/jpeg';
    if (!isJPG) {
      message.error('You can only upload JPG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = () => {
      // 使用ossupload覆蓋默認(rèn)的上傳方法
      UploadToOss(this, '上傳路徑oss配置信息', file).then(data => {
        console.log(data.res.requestUrls)

        this.setState({ imageUrl: data.res.requestUrls });
      })
    }
    return false; // 不調(diào)用默認(rèn)的上傳方法
  }
  render() {
    const uploadButton = (
      <div>
        <Icon type={this.state.loading ? 'loading' : 'plus'} />
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    const imageUrl = this.state.imageUrl;
    return (
      <Upload
        name="avatar"
        listType="picture-card"
        className="avatar-uploader"
        showUploadList={false}
        beforeUpload={this.beforeUpload}
        onChange={this.handleChange}
      >
        {imageUrl ? <img src={imageUrl} alt="" /> : uploadButton}
      </Upload>
    );
  }
}
export default Example;

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末茧球,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子揽思,更是在濱河造成了極大的恐慌袜腥,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件钉汗,死亡現(xiàn)場(chǎng)離奇詭異羹令,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)损痰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門福侈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人卢未,你說(shuō)我怎么就攤上這事肪凛⊙吆海” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵伟墙,是天一觀的道長(zhǎng)翘鸭。 經(jīng)常有香客問(wèn)我,道長(zhǎng)戳葵,這世上最難降的妖魔是什么就乓? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮拱烁,結(jié)果婚禮上生蚁,老公的妹妹穿的比我還像新娘。我一直安慰自己戏自,他們只是感情好邦投,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著擅笔,像睡著了一般志衣。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上剂娄,一...
    開(kāi)封第一講書(shū)人閱讀 52,736評(píng)論 1 312
  • 那天蠢涝,我揣著相機(jī)與錄音玄呛,去河邊找鬼阅懦。 笑死,一個(gè)胖子當(dāng)著我的面吹牛徘铝,可吹牛的內(nèi)容都是我干的耳胎。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼惕它,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼怕午!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起淹魄,我...
    開(kāi)封第一講書(shū)人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤郁惜,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后甲锡,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體兆蕉,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年缤沦,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了虎韵。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡缸废,死狀恐怖包蓝,靈堂內(nèi)的尸體忽然破棺而出驶社,到底是詐尸還是另有隱情,我是刑警寧澤测萎,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布亡电,位于F島的核電站,受9級(jí)特大地震影響硅瞧,放射性物質(zhì)發(fā)生泄漏逊抡。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一零酪、第九天 我趴在偏房一處隱蔽的房頂上張望冒嫡。 院中可真熱鬧,春花似錦四苇、人聲如沸孝凌。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)蟀架。三九已至,卻和暖如春榆骚,著一層夾襖步出監(jiān)牢的瞬間片拍,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工妓肢, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留捌省,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓碉钠,卻偏偏與公主長(zhǎng)得像纲缓,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子喊废,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容