Fusion Next 之 Upload 上傳元件設計思路

<form action="/api/file">
  <input type="file" />
  <button type="submit">submit</button>
</form>  複製程式碼

<form action="/api/file" method="post">
  <!-- input 設定為透明，覆蓋在 button 上面 --->
  <input type="file" style="opacity: 0; position:absolute;zindex:9999;top:0;right:0;"/>
  <button type="submit">Upload File</button>
</form>複製程式碼

<iframe name="uploadiframe" style="display:none"></iframe>
<form action="/api/file" method="post" target="uploadiframe">
  <input type="file" style="opacity: 0; position:absolute;zindex:9999;top:0;right:0;"/>
  <button type="submit">Upload File</button>
</form>複製程式碼

const doc = this.refs.iframe.contentDocument; // 取 iframe
const script = doc.getElementsByTagName('script')[0]; // 清除 iframe 內無用 script
if (script && script.parentNode === doc.body) {
  doc.body.removeChild(script);
}
const response = JSON.parse(doc.body.innerHTML); // 取返回內容解析成 JSON複製程式碼

<script>
function selectFile() {
  $('#inputfile').click(); 
}
function onSelect(target) {
  console.log(target.files); // 獲取檔案物件 
}
</script>
<div role="upload" onclick="selectFile()">
  <input type="file" style="display: none;" id="inputfile" onchange="onSelect(this)">
  <button>Upload File</button>
</div>複製程式碼

<div role="upload">
  <input type="file" style="display: none;">
  <div class="selecter">
      <i class="icon-add" />
      <span> Upload File </span>
  </div>
</div>複製程式碼

<div role="upload">
  <input type="file" style="display: none;">
  <div class="selecter">
      <i class="icon-upload" />
      <span class="title"> 點選或者拖動檔案到虛線框內上傳 </span>
      <span class="desc"> 支援 docx, xls, PDF, rar, zip, PNG, JPG 等型別檔案 </span>
  </div>
</div>複製程式碼

function upload(file) {
    const xhr = new XMLHttpRequest();

    // 上傳進度
    xhr.upload.onprogress = function progress(e) {
    };
    // 上傳狀態
    xhr.onload = function onload() {
    };
  
    const formData = new FormData();
    // 往 formData 裡面增加要上傳的檔案物件
    formData.append('filename', file);

    // 指定 api 介面和上傳方式
    xhr.open('POST', '/api/upload', true);
    // 開始傳送資料
    xhr.send(formData);
}複製程式碼

import {Upload, Button} from '@alifd/next';
const Selecter = Upload.Selecter;

class App extends React.Comonent {
  handleSelect = (files) => {
    // get files
  }
  render() {
    return <Selecter onSelect={this.handleSelect}>
      <Button type="primary">Upload File</Button>
    </Selecter>
  }
}複製程式碼

<Selecter onSelect={this.handleSelect}>
  <Icon type="add" />
  <span> Upload File </span>
</Selecter>複製程式碼

import {Upload, Button} from '@alifd/next';
const Selecter = Upload.Selecter; // 檔案選擇器
const Uploader = Upload.Uploader; // 檔案上傳器

class App extends React.Comonent {
  uploader = new Uploader({
    action: '/api/upload',
  //onProgress: this.onProgress // 進度監控
  });

  handleSelect = (files) => {
    // 上傳檔案
    this.uploader.startUpload(files);
  }
  render() {
    return <Selecter onSelect={this.handleSelect}>
      <Button type="primary">Upload File</Button>
    </Selecter>
  }
}複製程式碼

import { Upload, Input } from '@alifd/next';

const Uploader = Upload.Uploader; // 檔案上傳器

class App extends React.Component {
  uploader = new Uploader({
    action: '/api/upload',
  });
  // 處理貼上事件
  onPaste = e => {
    const files = e.clipboardData.files; // 獲取貼上的檔案資料
    this.uploader.startUpload(files); // 上傳檔案
  };
  render() {
    return <Input.TextArea onPaste={this.onPaste} placeholder="貼上截圖到這裡" />;
  }
}複製程式碼

import {Upload, Button} from '@alifd/next';

class App extends React.Comonent {
  handleChange = (file) => {
    console.log(file.url); // 直接獲取圖片 url
  }
  render() {
    return <div>
      <Upload action="/api/file" onChange={this.handleChange}>
        <Button type="primary">Upload File</Button>
      </Upload>
      <Upload action="/api/file" shape="card" onChange={this.handleChange}>
         Upload File
      </Upload>
      <Upload.Dragger action="/api/file"  onChange={this.handleChange}/>
    </div>
  }
}複製程式碼