记录一下工作中学习,需求背景:用户在上传项目中遇到的问题图片时,需要先用截图工具保存图片到本地,然后再点击上传按钮来上传图片,操作繁琐,能不能像聊天工具一样支持复制粘贴上传。需求描述:支持用户粘贴上传图片。
首先
先展示一下项目中使用上传组件的逻辑,展示不了公司代码,就自己写的小demo,代码有待优化。
import React, {
useEffect, useState } from 'react';
import {
Upload, Modal } from 'antd';
import * as _ from 'lodash'
import {
PlusOutlined } from '@ant-design/icons';
export default function UploadPicture() {
const [fileList, setFileList] = useState([]);
const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage, setPreViewImage] = useState();
const [previewTitle, setPreviewTitle] = useState('');
/** 上传图片的按钮 */
const uploadButton = (
<div>
<PlusOutlined />
<div style={
{
marginTop: 8 }}>Upload</div>
</div>
);
/** 文件转化成64位 */
const getBase64 = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
/** 图片预览 */
const handlePreview = async file => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
setPreViewImage(file.url || file.preview);
setPreviewTitle(file.name || file.url.substring(file.url.lastIndexOf('/') + 1));
setPreviewVisible(true<