From 3a877cb5485879be529f6cc97de7f7bfad537190 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A0=9A=E5=BF=83?= Date: Tue, 7 Apr 2020 22:21:06 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=96=87?= =?UTF-8?q?=E4=BB=B6=E5=9C=A8=E7=BA=BF=E7=BC=96=E8=BE=91=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/index.jsx | 748 +++++++++++++++++++++++++++-------------- index.html | 3 + src/DefaultFileItem.js | 9 +- src/FileItem.js | 5 +- src/FileList.js | 13 + src/Uploader.js | 3 + src/Uploader.less | 6 +- src/locale.js | 3 + 8 files changed, 526 insertions(+), 264 deletions(-) diff --git a/demo/index.jsx b/demo/index.jsx index 6a436df..1035b1f 100644 --- a/demo/index.jsx +++ b/demo/index.jsx @@ -1,38 +1,38 @@ import React from 'react'; import ReactDOM from 'react-dom'; import Button from 'uxcore-button'; -import Uploader from '../src/'; +import Uploader from '../src'; import '../style'; import 'kuma-base/core.less'; // attachment file tips const tips = 请选择大小不超过5M的文本文件，支持doc,docx,xls,xlsx,zip格式，最多3张; const imgTips = 单张不超过3M，支持jpeg,jpg,png格式; -const imgTips2 = 单文件不超过5M; +const imgTips2 = 请选择大小不超过5M的文件，支持doc,docx,xls,xlsx,pdf,ppt,pptx等; // http://dip.alibaba-inc.com/api/v2/services/schema/mock/22006 const fileList = [ { - 'name': 'TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg', - 'fileType': 'image/jpeg', - 'type': 'upload', - 'response': { - 'success': true, - 'data': { - 'url': 'http://gdp.alicdn.com/tps/i2/T1k2HJXexjXXauUnsh-180-180.png', + name: 'TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg', + fileType: 'image/jpeg', + type: 'upload', + response: { + success: true, + data: { + url: 'http://gdp.alicdn.com/tps/i2/T1k2HJXexjXXauUnsh-180-180.png', canRemove: true, // 是否可以删除，可选 downloadUrl: 'http://gdp.alicdn.com/tps/i2/T1k2HJXexjXXauUnsh-180-180.png', // 下载 URL，可选 }, }, }, { - 'ext': 'jpg', - 'name': 'TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg', - 'size': 16387, - 'fileType': 'image/jpeg', - 'type': 'upload', - 'response': { - 'success': true, - 'data': { - 'url': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502095774427&di=3897e137b04c575ac0f6e84c51e3bb46&imgtype=0&src=http%3A%2F%2Fs3.lvjs.com.cn%2Ftrip%2Foriginal%2F20140818131532_2090993967.jpg', + ext: 'jpg', + name: 'TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg', + size: 16387, + fileType: 'image/jpeg', + type: 'upload', + response: { + success: true, + data: { + url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502095774427&di=3897e137b04c575ac0f6e84c51e3bb46&imgtype=0&src=http%3A%2F%2Fs3.lvjs.com.cn%2Ftrip%2Foriginal%2F20140818131532_2090993967.jpg', canRemove: true, // 是否可以删除，可选 downloadUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502095774427&di=3897e137b04c575ac0f6e84c51e3bb46&imgtype=0&src=http%3A%2F%2Fs3.lvjs.com.cn%2Ftrip%2Foriginal%2F20140818131532_2090993967.jpg', // 下载 URL，可选 }, @@ -41,75 +41,221 @@ const fileList = [ ]; const fileList2 = [ { - 'name': 'TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg', - 'fileType': 'image/jpeg', - 'type': 'upload', - 'response': { - 'success': true, - 'data': { - 'url': 'http://gdp.alicdn.com/tps/i2/T1k2HJXexjXXauUnsh-180-180.png', + name: 'TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg', + fileType: 'image/jpeg', + type: 'upload', + response: { + success: true, + data: { + url: 'http://gdp.alicdn.com/tps/i2/T1k2HJXexjXXauUnsh-180-180.png', canRemove: true, // 是否可以删除，可选 downloadUrl: 'http://gdp.alicdn.com/tps/i2/T1k2HJXexjXXauUnsh-180-180.png', // 下载 URL，可选 }, }, }, { - 'ext': 'jpg', - 'name': 'TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg', - 'size': 16387, - 'fileType': 'image/jpeg', - 'type': 'upload', - 'response': { - 'success': true, - 'data': { - 'url': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502095774427&di=3897e137b04c575ac0f6e84c51e3bb46&imgtype=0&src=http%3A%2F%2Fs3.lvjs.com.cn%2Ftrip%2Foriginal%2F20140818131532_2090993967.jpg', + ext: 'jpg', + name: 'TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg', + size: 16387, + fileType: 'image/jpeg', + type: 'upload', + response: { + success: true, + data: { + url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502095774427&di=3897e137b04c575ac0f6e84c51e3bb46&imgtype=0&src=http%3A%2F%2Fs3.lvjs.com.cn%2Ftrip%2Foriginal%2F20140818131532_2090993967.jpg', canRemove: true, // 是否可以删除，可选 downloadUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502095774427&di=3897e137b04c575ac0f6e84c51e3bb46&imgtype=0&src=http%3A%2F%2Fs3.lvjs.com.cn%2Ftrip%2Foriginal%2F20140818131532_2090993967.jpg', // 下载 URL，可选 }, }, }, { - 'ext': 'jpg', - 'name': 'TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg', - 'size': 16387, - 'fileType': 'image/jpeg', - 'type': 'upload', - 'response': { - 'success': true, - 'data': { - 'url': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502095774427&di=3897e137b04c575ac0f6e84c51e3bb46&imgtype=0&src=http%3A%2F%2Fs3.lvjs.com.cn%2Ftrip%2Foriginal%2F20140818131532_2090993967.jpg', + ext: 'jpg', + name: 'TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg', + size: 16387, + fileType: 'image/jpeg', + type: 'upload', + response: { + success: true, + data: { + url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502095774427&di=3897e137b04c575ac0f6e84c51e3bb46&imgtype=0&src=http%3A%2F%2Fs3.lvjs.com.cn%2Ftrip%2Foriginal%2F20140818131532_2090993967.jpg', canRemove: true, // 是否可以删除，可选 downloadUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502095774427&di=3897e137b04c575ac0f6e84c51e3bb46&imgtype=0&src=http%3A%2F%2Fs3.lvjs.com.cn%2Ftrip%2Foriginal%2F20140818131532_2090993967.jpg', // 下载 URL，可选 }, }, }, { - 'ext': 'jpg', - 'name': 'TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg', - 'size': 16387, - 'fileType': 'image/jpeg', - 'type': 'upload', - 'response': { - 'success': true, - 'data': { - 'url': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502095774427&di=3897e137b04c575ac0f6e84c51e3bb46&imgtype=0&src=http%3A%2F%2Fs3.lvjs.com.cn%2Ftrip%2Foriginal%2F20140818131532_2090993967.jpg', + ext: 'jpg', + name: 'TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg', + size: 16387, + fileType: 'image/jpeg', + type: 'upload', + response: { + success: true, + data: { + url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502095774427&di=3897e137b04c575ac0f6e84c51e3bb46&imgtype=0&src=http%3A%2F%2Fs3.lvjs.com.cn%2Ftrip%2Foriginal%2F20140818131532_2090993967.jpg', canRemove: true, // 是否可以删除，可选 downloadUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502095774427&di=3897e137b04c575ac0f6e84c51e3bb46&imgtype=0&src=http%3A%2F%2Fs3.lvjs.com.cn%2Ftrip%2Foriginal%2F20140818131532_2090993967.jpg', // 下载 URL，可选 }, }, }, { - 'ext': 'jpg', - 'name': 'TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg', - 'size': 16387, - 'fileType': 'image/jpeg', - 'type': 'upload', - 'response': { - 'success': true, - 'data': { - 'url': 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502095774427&di=3897e137b04c575ac0f6e84c51e3bb46&imgtype=0&src=http%3A%2F%2Fs3.lvjs.com.cn%2Ftrip%2Foriginal%2F20140818131532_2090993967.jpg', + ext: 'jpg', + name: 'TB1Xe3SMpXXXXX6XpXXTCU0QpXX-300-300.jpg', + size: 16387, + fileType: 'image/jpeg', + type: 'upload', + response: { + success: true, + data: { + url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502095774427&di=3897e137b04c575ac0f6e84c51e3bb46&imgtype=0&src=http%3A%2F%2Fs3.lvjs.com.cn%2Ftrip%2Foriginal%2F20140818131532_2090993967.jpg', canRemove: true, // 是否可以删除，可选 downloadUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1502095774427&di=3897e137b04c575ac0f6e84c51e3bb46&imgtype=0&src=http%3A%2F%2Fs3.lvjs.com.cn%2Ftrip%2Foriginal%2F20140818131532_2090993967.jpg', // 下载 URL，可选 }, }, }, ]; +const fileList3 = [ + { + __uploaderId: 'uploader0', + ext: 'txt', + fileType: 'text/plain', + id: '', + name: 'pwa.txt', + previewUrl: 'https://yida.alibaba-inc.com/inst/preview?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=pwa.txt&fileSize=4388&downloadUrl=0db1900c-64a4-44d7-8fbc-f6ffcdd06f2b.txt', + response: { + content: { + appType: '', + creator: '162333', + downloadUrl: 'https://yida.alibaba-inc.com/fileHandle?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=0db1900c-64a4-44d7-8fbc-f6ffcdd06f2b.txt&instId=&type=download', + encrypt: 'n', + extName: 'txt', + formUuid: 'FORM-5Q566O71J24EN9MZXEZ1BYCZ4CMS1TJW1WR7K0', + gmtCreate: 1586238523617, + gmtModified: 1586238523617, + gmtUpload: 1586238523617, + id: null, + instanceNumber: null, + isDeleted: 'n', + memo: '', + modifier: '162333', + name: 'pwa.txt', + needWaterMark: false, + open: 'n', + path: '0db1900c-64a4-44d7-8fbc-f6ffcdd06f2b.txt', + previewUrl: 'https://yida.alibaba-inc.com/inst/preview?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=pwa.txt&fileSize=4388&downloadUrl=0db1900c-64a4-44d7-8fbc-f6ffcdd06f2b.txt', + editUrl: 'https://yida.alibaba-inc.com/inst/preview?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=pwa.txt&fileSize=4388&downloadUrl=0db1900c-64a4-44d7-8fbc-f6ffcdd06f2b.txt', + procInstId: '', + shardKey: '', + size: 4388, + source: '', + status: '', + systemType: '', + type: 'OSS', + url: 'https://yida.alibaba-inc.com/fileHandle?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=0db1900c-64a4-44d7-8fbc-f6ffcdd06f2b.txt&instId=&type=download', + }, + errorCode: '', + errorLevel: '', + errorMsg: '', + success: true, + throwable: '', + }, + size: 4388, + type: 'upload', + url: 'https://yida.alibaba-inc.com/fileHandle?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=0db1900c-64a4-44d7-8fbc-f6ffcdd06f2b.txt&instId=&type=download', + }, + { + __uploaderId: 'uploader2', + ext: 'xlsx', + fileType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', + id: '', + name: 'T恤尺寸.xlsx', + previewUrl: 'https://yida.alibaba-inc.com/inst/preview?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=T%E6%81%A4%E5%B0%BA%E5%AF%B8.xlsx&fileSize=10862&downloadUrl=b9ec9cf8-56b8-49c1-82b0-93f8f21aea7e.xlsx', + response: { + content: { + appType: '', + creator: '162333', + downloadUrl: 'https://yida.alibaba-inc.com/fileHandle?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=b9ec9cf8-56b8-49c1-82b0-93f8f21aea7e.xlsx&instId=&type=download', + encrypt: 'n', + extName: 'xlsx', + formUuid: 'FORM-5Q566O71J24EN9MZXEZ1BYCZ4CMS1TJW1WR7K0', + gmtCreate: 1586238610241, + gmtModified: 1586238610241, + gmtUpload: 1586238610241, + id: null, + instanceNumber: null, + isDeleted: 'n', + memo: '', + modifier: '162333', + name: 'T恤尺寸.xlsx', + needWaterMark: false, + open: 'n', + path: 'b9ec9cf8-56b8-49c1-82b0-93f8f21aea7e.xlsx', + previewUrl: 'https://yida.alibaba-inc.com/inst/preview?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=T%E6%81%A4%E5%B0%BA%E5%AF%B8.xlsx&fileSize=10862&downloadUrl=b9ec9cf8-56b8-49c1-82b0-93f8f21aea7e.xlsx', + editUrl: 'https://yida.alibaba-inc.com/inst/preview?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=T%E6%81%A4%E5%B0%BA%E5%AF%B8.xlsx&fileSize=10862&downloadUrl=b9ec9cf8-56b8-49c1-82b0-93f8f21aea7e.xlsx', + procInstId: '', + shardKey: '', + size: 10862, + source: '', + status: '', + systemType: '', + type: 'OSS', + url: 'https://yida.alibaba-inc.com/fileHandle?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=b9ec9cf8-56b8-49c1-82b0-93f8f21aea7e.xlsx&instId=&type=download', + }, + errorCode: '', + errorLevel: '', + errorMsg: '', + success: true, + throwable: '', + }, + size: 10862, + type: 'upload', + url: 'https://yida.alibaba-inc.com/fileHandle?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=b9ec9cf8-56b8-49c1-82b0-93f8f21aea7e.xlsx&instId=&type=download', + }, + { + __uploaderId: 'uploader6', + ext: 'ppt', + fileType: 'application/vnd.ms-powerpoint', + id: '', + name: '1c28404f9a6648d7c1c708a1284ac850ac020472.ppt', + previewUrl: 'https://yida.alibaba-inc.com/inst/preview?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=1c28404f9a6648d7c1c708a1284ac850ac020472.ppt&fileSize=146432&downloadUrl=1408e60a-e2ce-4620-b288-d0570429b9cc.ppt', + response: { + content: { + appType: '', + creator: '162333', + downloadUrl: 'https://yida.alibaba-inc.com/fileHandle?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=1408e60a-e2ce-4620-b288-d0570429b9cc.ppt&instId=&type=download', + encrypt: 'n', + extName: 'ppt', + formUuid: 'FORM-5Q566O71J24EN9MZXEZ1BYCZ4CMS1TJW1WR7K0', + gmtCreate: 1586238612187, + gmtModified: 1586238612187, + gmtUpload: 1586238612187, + id: null, + instanceNumber: null, + isDeleted: 'n', + memo: '', + modifier: '162333', + name: '1c28404f9a6648d7c1c708a1284ac850ac020472.ppt', + needWaterMark: false, + open: 'n', + path: '1408e60a-e2ce-4620-b288-d0570429b9cc.ppt', + previewUrl: 'https://yida.alibaba-inc.com/inst/preview?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=1c28404f9a6648d7c1c708a1284ac850ac020472.ppt&fileSize=146432&downloadUrl=1408e60a-e2ce-4620-b288-d0570429b9cc.ppt', + editUrl: 'https://yida.alibaba-inc.com/inst/preview?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=1c28404f9a6648d7c1c708a1284ac850ac020472.ppt&fileSize=146432&downloadUrl=1408e60a-e2ce-4620-b288-d0570429b9cc.ppt', + procInstId: '', + shardKey: '', + size: 146432, + source: '', + status: '', + systemType: '', + type: 'OSS', + url: 'https://yida.alibaba-inc.com/fileHandle?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=1408e60a-e2ce-4620-b288-d0570429b9cc.ppt&instId=&type=download', + }, + errorCode: '', + errorLevel: '', + errorMsg: '', + success: true, + throwable: '', + }, + size: 146432, + type: 'upload', + url: 'https://yida.alibaba-inc.com/fileHandle?appType=APP_IW48H4Z2XO8T8HRC5I0X&fileName=1408e60a-e2ce-4620-b288-d0570429b9cc.ppt&instId=&type=download', + }, +]; class Demo1 extends React.Component { constructor(props) { @@ -124,34 +270,38 @@ class Demo1 extends React.Component { fileList, }); } + beforeUpload(...args) { console.log('beforeUpload', args); throw new Error('this error is made for test'); } + render() { const me = this; window.uploader = me; - return (); + return ( + + ); } } ReactDOM.render(( @@ -182,26 +332,28 @@ class Demo2 extends React.Component { render() { const me = this; - return (); + return ( + + ); } } @@ -222,27 +374,30 @@ class Demo3 extends React.Component { fileList, }); } + render() { const me = this; - return (); + return ( + + ); } } @@ -264,26 +419,29 @@ class Demo31 extends React.Component { fileList, }); } + render() { const me = this; - return (); + return ( + + ); } } @@ -304,27 +462,30 @@ class Demo4 extends React.Component { fileList, }); } + render() { const me = this; - return (); + return ( + + ); } } @@ -346,26 +507,29 @@ class Demo41 extends React.Component { fileList, }); } + render() { const me = this; - return (); + return ( + + ); } } @@ -382,6 +546,7 @@ class Demo5 extends React.Component { fileList: this.fileList, }; } + handleChange(fileList) { this.setState({ fileList, @@ -389,16 +554,19 @@ class Demo5 extends React.Component { } render() { - return (); + return ( + + ); } } @@ -422,15 +590,17 @@ class Demo6 extends React.Component { } render() { - return (); + return ( + + ); } } @@ -452,27 +622,30 @@ class Demo7 extends React.Component { fileList, }); } + render() { const me = this; - return (); + return ( + + ); } } @@ -502,50 +675,58 @@ class Demo8 extends React.Component { fileList: [], }; } + handleChange(fileList) { this.setState({ fileList, }); } + render() { - return (
- - - - - - - - - - - - -
); + return ( +
+ + + + + + + + + + + + +
+ ); } } @@ -558,17 +739,20 @@ class Demo9 extends React.Component { constructor(props) { super(props); } + render() { - return ( - -

已废弃

- ); + return ( + + +

已废弃

+ + ); } } @@ -577,3 +761,47 @@ ReactDOM.render(( ), document.getElementById('sample9')); // hljs.initHighlightingOnLoad(); + +class Demo10 extends React.Component { + constructor(props) { + super(props); + this.state = { + fileList3, + }; + } + + handleChange(fileList3) { + this.setState({ + fileList3, + }); + } + + render() { + const me = this; + return ( + + ); + } +} + +ReactDOM.render(( + +), document.getElementById('sample10')); diff --git a/index.html b/index.html index f88d95b..95a615c 100644 --- a/index.html +++ b/index.html @@ -99,7 +99,10 @@

Sample9 - 包裹UI-2

+ +

Sample10 - 文件预览

+