上传文件
第三方组件
富文本框可以使用一个非常优秀的富文本框控件uppy的react封装。
文档地址https://uppy.io/docs/
下载安装依赖
yarn add @uppy/react @uppy/core @uppy/xhr-upload
引入依赖项及样式
import Uppy from '@uppy/core'; import XHRUpload from '@uppy/xhr-upload'; // import Webcam from '@uppy/webcam'; // import ScreenCapture from '@uppy/screen-capture'; // import ImageEditor from '@uppy/image-editor'; // import OneDrive from '@uppy/onedrive'; // import Instagram from '@uppy/instagram'; import { Dashboard, DashboardModal, ProgressBar, StatusBar, useUppy } from '@uppy/react'; import '@uppy/core/dist/style.css'; import '@uppy/dashboard/dist/style.css'; import '@uppy/progress-bar/dist/style.css'; import '@uppy/status-bar/dist/style.css';
上传对话框固定在页面上
()=>{const s001 = '/api/upload';const uppy = useUppy(() => {const uppy = Uppy({allowMultipleUploads: true,autoProceed: true,debug: true,restrictions: {maxFileSize: 1000000,maxNumberOfFiles: 3,minNumberOfFiles: 1,// allowedFileTypes: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/wps-office.xlsx']// allowedFileTypes: ['application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/wps-office.docx']allowedFileTypes: ['image/*', 'video/*']// },// onBeforeUpload(files) {// return files;// const fs = {} as typeof files;// Object.keys(files).forEach((name) => {// const file = files[name];// console.error('filetype', file.meta.type);// if (/(wps-office)|(vnd.ms-excel)|(openxmlformats-officedocument.spreadsheetml.sheet)/.test(file.meta.type)) {// }// fs[name] = file;// });// return fs;}});uppy.use(XHRUpload, {fieldName: 'file',formData: true,method: 'PUT',endpoint: s001});uppy.on('complete', (result) => {// 以下代码可将上传的内容变成下载链接,放在页面上./* const [success] = result.successful;if (success) {const content = success.response.body as { name: string; body: string; };const blob = new Blob([content.body]);setname(content.name);setHref(URL.createObjectURL(blob));}*/});return uppy;});return <Dashboard uppy={uppy} />;}
按钮事件中调用上传
()=>{const s001 = '/api/upload';const [open, setopen] = useState(false);const uppy = useUppy(() => {const uppy = Uppy({allowMultipleUploads: true,autoProceed: true,debug: true,restrictions: {maxFileSize: 1000000,maxNumberOfFiles: 3,minNumberOfFiles: 1,// allowedFileTypes: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/wps-office.xlsx']// allowedFileTypes: ['application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/wps-office.docx']allowedFileTypes: ['image/*', 'video/*']// },// onBeforeUpload(files) {// return files;// const fs = {} as typeof files;// Object.keys(files).forEach((name) => {// const file = files[name];// console.error('filetype', file.meta.type);// if (/(wps-office)|(vnd.ms-excel)|(openxmlformats-officedocument.spreadsheetml.sheet)/.test(file.meta.type)) {// }// fs[name] = file;// });// return fs;}});uppy.use(XHRUpload, {fieldName: 'file',formData: true,method: 'PUT',endpoint: s001});uppy.on('complete', (result) => {// 以下代码可将上传的内容变成下载链接,放在页面上./* const [success] = result.successful;if (success) {const content = success.response.body as { name: string; body: string; };const blob = new Blob([content.body]);setname(content.name);setHref(URL.createObjectURL(blob));}*/});return uppy;});return <><input type='button' value='upload...' onClick={() => {setopen(true);}} /><DashboardModal uppy={uppy} open={open} onRequestClose={() => {setopen(false);}} /></>}