react 实现图片上传功能

首先我们需要进入ant-design文档中，找到upload组件

import React from "react";
import { Upload, Modal } from 'antd';
import { PlusOutlined } from '@ant-design/icons';function getBase64(file) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => resolve(reader.result);reader.onerror = error => reject(error);});
}export default class PicturesWall extends React.Component {state = {previewVisible: false,previewImage: '',previewTitle: '',fileList: [],};handleCancel = () => this.setState({ previewVisible: false });handlePreview = async file => {if (!file.url && !file.preview) {file.preview = await getBase64(file.originFileObj);}this.setState({previewImage: file.url || file.preview,previewVisible: true,previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),});};handleChange = ({ fileList }) => this.setState({ fileList });render() {const { previewVisible, previewImage, fileList, previewTitle } = this.state;const uploadButton = (<div><PlusOutlined /><div style={{ marginTop: 8 }}>Upload</div></div>);return (<><Uploadaction={`${HOST}:${PORT}/goods/upload`}  //和后台接口对应一致，这是我自己的接口，大家自行设置listType="picture-card"fileList={fileList}onPreview={this.handlePreview}onChange={this.handleChange}>{fileList.length >= 8 ? null : uploadButton}</Upload><Modalvisible={previewVisible}title={previewTitle}footer={null}onCancel={this.handleCancel}><img alt="example" style={{ width: '100%' }} src={previewImage} /></Modal></>);}
}

这样一个简单的上传页面就能看到了

那么接下来如何实现将图片发送到后台服务器？

第一步：下载connect-multiparty组件
第二步：导入上传中间件并创建上传中间件对象

const multiparty = require('connect-multiparty');
const multipartyMiddleWare = multiparty();

图上上传接口：goodsapi.js

/*图片上传接口：http://localhost:8089/goods/upload
*/
router.post('/upload',multipartyMiddleWare,(req, res) => {//输出上传文件的名称(测试)console.log("上传文件名:",req.files.photoContent.name)//获取上传文件let file = req.files.photoContent;   //将上传文件保留在临时文件中//设置上传文件的保存位置let desc_dir = path.join(__dirname+'../../../public/images')+'\\'+file.originalFilenameconsole.log("保存路径：",desc_dir)//将临时文件中的数据复制到保存位置fs.readFile(file.path,function (err,data) {fs.writeFile(desc_dir,data,function (err) {if (err){console.log(err)res.json({code: 1002,msg: '写入文件失败'})}})})//将上传图片的存储路径响应给客户端res.json({code: 1000,ImgPath: `http://localhost:8089/images/${file.originalFilename}`//网络访问时，public是虚拟目录，不需要写出来})
})

图片上传成功后在后台服务器能呈现出来文件名

react 实现图片上传功能相关推荐

ckeditor java 上传_java使用CKEditor实现图片上传功能
java如何使用ckeditor实现图片上传功能,具体内容如下 1.根据实际需要下载指定的ckeditor 2.删除文件ckeditor/plugins/image/dialogs/image.js预 ...
关于微信内置浏览器，打开图片上传功能，调用的问题
关于微信内置浏览器,打开图片上传功能,调用的问题前段时间,项目完结测试的时候,同事打开魅族手机测试,无意中发现一个奇葩的问题! 描述: 显示的是文件系统,列表式的,没有调用相机的功能图标,为什么呢? ...
（转）淘淘商城系列——实现图片上传功能
http://blog.csdn.net/yerenyuan_pku/article/details/72808000 上文我们使用FastDFS-Client进行了简单的文件上传操作测试,淘淘商城项 ...
Smiditor实现图片上传功能
Simditor 是 Tower 开源的一个基于浏览器所见即所得的文本编辑器. 相比传统的编辑器它的特点是: 功能精简,加载快速输出格式化的标准 HTML 每一个功能都有非常优秀的使用体验兼容的主 ...
PHP实现图片上传功能
PHP实现图片上传功能: 第一个页: picupload.php 代码如下: <form action="picop.php" method="post" ...
ckfinder php 配置,PHP中Ckeditor+Ckfinder配置图片上传功能_PHP教程
从标题来看我们知道Ckeditor不支持图片上传功能,它是需要一个组件Ckfinder才可以支持上传图片, 本文章就来详细的介绍了如何配置Ckeditor+Ckfinder实现图片上传的功能. 第一: ...
Vue 图片上传功能
Vue 图片上传功能 Vue 图片上传功能,自定义上传限制上传类型 & 多选: ① accept 属性只能与配合使用.它规定能够通过文件上传进行提交的文件类型. ② multiple 属性 ...
纯前端实现图片上传功能
纯前端实现图片上传功能,告别后端formData上传使用ElementUI中的upload组件+腾讯云实现简单的图片上传功能了解了upload的基本属性之后我们要开始上硬菜了使用ElementU ...
织梦dedecms广告管理增加广告图片上传功能
织梦的广告位管理是一个不错的插件内部插件,但是dedecms的广告管理功能稍微有点次,不能直接上传图片生成图片链接本文就是在dedecms广告管理原有的基础上增加广告图片上传功能. 安装方法,对应自 ...

react 实现图片上传功能

react 实现图片上传功能相关推荐

最新文章

热门文章