精华内容
下载资源
问答
  • antd+node.js实现图片上传图片和表单同提交) 1、 前端实现 import React from 'react'; import { connect } from 'react-redux'; import { RightCircleOutlined, UploadOutlined } from '@ant-design/icons'; ...

    antd+node.js实现图片上传(图片和表单同提交)

    1、 前端实现
    import React from 'react';
    import { connect } from 'react-redux';
    import { RightCircleOutlined, UploadOutlined } from '@ant-design/icons';
    import { Input, Form, Button, Upload } from 'antd';
    const FormItem = Form.Item;
    
    class upload extends React.Component {
        constructor(){
            super()
            this.state={
                fileList:[]
            }
        }
        /*点击上传时触发*/
        onChange=({fileList: newFileList})=>{
            this.setState({fileList:newFileList});
            console.log(newFileList)
        }
        render(){
            return <div>
               <Upload
                   action="http://localhost:8080/upload"
                   listType="picture-card"
                   onChange={this.onChange} //0000
                   fileList={this.state.fileList}
               >
                   {this.state.fileList.length < 2 && '+ Upload'}
               </Upload>
            <div>
        }
    }
    export default connect()(upload)
    
    2、后端 实现

    本文后端使用express框架

    const express = require('express');
    const router = express.Router();
    const path=require('path')
    const fs=require('fs')
    /*使用此中间件*/
    const multiparty = require('connect-multiparty');
    
    const multiparMiddleware=multiparty()
    router.post('/upload',multiparMiddleware, (req, res) => {
        console.log(req.files.file)
        //上传的图片参数
        var file=req.files.file
        //定义文件的存放路径
        var des_file=path.join(__dirname,'./public/img')+"\\"+file.originalFilename
        console.log(des_file)
        //将文件存入到本地服务器文件中
        fs.readFile(file.path,function(err,data){
            fs.writeFile(des_file,data,function(err){
                if(err){
                    res.json({code:1});
                    return
                }
            })
        })
        //将图片地址存放地址返回
        res.json({
            code:0,
            url:`http://localhost:8080/public/${file.originalFilename}`
        })
    })
    

    *注:*设置后端响应头
    res.header(‘Access-Control-Allow-Headers’,“x-requested-with,content-type”)
    开设public目录
    app.use(’/public/’,express.static(path.join(__dirname,’./public’)))

    3、联合表单

    前端上传图片触发onchange事件,fileList[0].response.url为图片的地址,将图片地址,插入form表单,上传到数据库中,与其他表单信息一起保存

    展开全文
  • antd上传图片,预览图样式设置

    千次阅读 2020-05-05 17:00:13
    <template> <a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" ...

    在这里插入图片描述

    <template>
      <a-upload
        name="avatar"
        list-type="picture-card"
        class="avatar-uploader"
        :show-upload-list="false"
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        :before-upload="beforeUpload"
        @change="handleChange"
      >
      <!-- 限定预览图高度 -->
        <img v-if="imageUrl" :src="imageUrl" alt="avatar" :style="{width:imgSize[0] + 'px', height:imgSize[1] + 'px'}"/>
        <div v-else>
          <a-icon :type="loading ? 'loading' : 'plus'" />
          <div class="ant-upload-text">
            Upload
          </div>
        </div>
      </a-upload>
    </template>
    
    <script>
    export default {
      data() {
        return {
          	loading: false,
          	imageUrl: '',
    		imgSize: [200, 150]
        };
      },
     </script>
    <style>
    /*css 清除图框内边距,图片占满upload盒子 */
    .ant-upload.ant-upload-select-picture-card > .ant-upload{
    	padding: 0!important;
    }
    
    /*css 设置预览图片大小 */
    /* .ant-upload > img{
      width: 158px;
      height: 128px;
    } */
    </style> 
      
    
    展开全文
  • 在实现图片上传时,可能需要用到Upload,但是它默认的上传方式是加入图片后直接上传,如果要实现最后再一次性上传,需要自定义内容。 //添加按钮的样式 const uploadButton = ( ...
  • antd upload 图片上传前压缩

    千次阅读 2020-11-05 11:35:42
    onChange = (files, type, index) => { const newItem = _.cloneDeep(this.state.imgData); if (type === "add") { const file = [...files].... // 多次上传之前的数据 const handle = this.handleUPdata;..
      onChange = (files, type, index) => {
    
        const newItem = _.cloneDeep(this.state.imgData);
        if (type === "add") {
          const file = [...files].pop().file;
          const newitem = [...files].pop(); // 多次上传之前的数据
          const handle = this.handleUPdata; // 图片上传接口
          
          // 限制上传十兆以上图片
          if (file.size > 10 * 1024 * 1024) {
            Toast.fail("请上传10M以下的图片!");
            return;
          }
          // 更新状态
          this.setState({
            files,
            loading: true,
          });
          // 压缩一兆以上图片
          if (file.size > 1 * 1024 * 1024) {
            let rate = 0.2;
            let reader = new FileReader();
            reader.readAsDataURL(file);
            let img = new Image();
            reader.onload = function (e) {
              img.src = e.target.result;
            };
            img.onload = function () {
              let canvas = document.createElement("canvas");
              let context = canvas.getContext("2d");
              // 文件大小KB
              const fileSizeKB = Math.floor(file.size / 1024);
              // console.log('file size:', fileSizeKB, 'kb');
              // 配置rate和maxSize的关系
              if (fileSizeKB * rate > 3027) {
                rate = Math.floor((3027 / fileSizeKB) * 10) / 30;
                }
              // 缩放比例,默认0.5
              let targetW = (canvas.width = this.width * rate);
              let targetH = (canvas.height = this.height * rate);
              context.clearRect(0, 0, targetW, targetH);
              context.drawImage(img, 0, 0, targetW, targetH);
              canvas.toBlob((blob) => {
                const newImage = new File([blob], file.name, {
                  type: file.type,
                });
                // console.log(newImage.size / 1024, "kb");
                // 图片上传接口
                handle([{ file: newImage }]);  
              });
            };
          } else {
            // 图片没有超限则直接上传
            handle(files);// 图片上传接口
          }
        } else {
          // 图片移除逻辑
        }
      };
    
    展开全文
  • react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能
  • 当需求有上传完图片且保存到草稿里时,不仅需要调接口上传图片,而且在重新进入页面时,也要预览效果。 函数组件也好、类组件也好,使用逻辑都一样,下面对着antd的示例详细解析 ```javascript import React from '...

    当需求有上传完图片且保存到草稿里时,不仅需要调接口上传图片,而且在重新进入页面时,也要预览效果。
    函数组件也好、类组件也好,使用逻辑都一样,下面对着antd的示例详细解析

    import React from 'react';
    import {Upload, Modal} from 'antd';
    import {PlusOutlined} from '@ant-design/icons';
    
    // 这里时图片格式得转换,具体看需要那种格式,返回promise
    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);
        });
    }
    
    class demo extends React.Component {
        state = {
        	// 预览开关
            previewVisible: true,
            // 预览图
            previewImage: '',
            // 预览标题
            previewTitle: '',
            // 图片信息
            fileList: [
                {
            	uid: '-xxx',
            	// 文件上传的动画,进度条
            	percent: 50,
            	name: 'image.png',
            	// 上传得一个状态
            	status: 'uploading',
            	url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          		},
            ]
        };
    
        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 (
                <div>
                    <Upload
                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                        listType="picture-card"
                        // 已经上传的文件列表
                        fileList={fileList}
                        onPreview={this.handlePreview}
                        onChange={this.handleChange}
                    >
                    	// 如若有了一张图片了,上传图片的按钮会隐藏掉
                        {fileList.length >= 1 ? null : uploadButton}
              
                    </Upload>
                    <Modal
                        visible={previewVisible}
                        title={previewTitle}
                        footer={null}
                        onCancel={this.handleCancel}
                    >
                        <img alt="example" style={{width: '100%'}} src={previewImage} />
                    </Modal>
                </div>
            );
        }
    }
    
    export default demo;
    
    

    form里使用form.item时,可以设置自定义校验validator

    export const sizeCheck = (rule, value, callback) => {
        let size = value.file.originFile.size;
        if (size > 5 * 1024 * 1024) {
            callback('图片大小不符合,请重新上传');
        }
        return new Promise((resolve, rej) => {
            let img = new Image();
            img.src = value.file.thumbUrl;
            img.onload = function () {
                let size = [img.width, img.height];
                if (size[0] >= 120 && size[1] >= 120 && size[0] !== size[1]) {
                    callback('尺寸大小不符合,请重新上传');
                    rej();
                    return;
                }
                callback();
                resolve();
            };
        });
    };
    
    Let yourself gradually excellent
    
    展开全文
  • antd Upload antd Upload listType 3个类型 一个项目把坑踩全了… 之前使用Upload 是用 action 属性,指定上传地址。...问:哎 上传图片怎么会访问静态资源呢??? 答:默认的上传行为… Upload提供 【 customRe
  • 采用antDesgin,表单中有上传组件Upload,然后写了校验规则,提示图片需要上传上传成功后,依旧提示:图片上传 如下: <a-form-model-item label="banner展示图" prop="img"> <a-upload class=...
  • react使用antd upload上传图片

    千次阅读 2020-09-15 15:59:14
    action="/caizhi_mkto/api/applet/file/upload.do" fileList={[]} data={{ bizKey: "morningpaper" }} // action 中的附件参数 onSuccess={this.onSuccess} beforeUpload={this.beforeUploadImg} > + 上传图片 ...
  • <div v-if="fileList.length < imgNum"> <a-icon type="plus" /> <div class="ant-upload-text"> 上传图片 </div> </div> </a-upload> <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel"> ...
  • antd中的图片上传

    千次阅读 2019-05-24 17:19:55
    https://www.cnblogs.com/qianguyihao/p/10460834.html
  • 一、 React 结合 Antd 实现图片上传 引入所需相关的组件和文件,代码如下所示: import React, { Component } from 'react' import PropTypes from 'prop-types' import { Upload, Icon, Modal, message } from '...
  • return isLt2M } if(this.fileList.length == this.maxLength){ this.$message.error('最多只能上传'+this.maxLength +'图片') this.disabled = true }else{ this.disabled = false } }, }, watch:{ } } </script> ...
  • antd upload上传图片前后台代码实现

    千次阅读 2019-08-19 15:25:25
    1、引入antd上传图片需要的包 import React, { Component } from 'react'; import { Upload, Icon, message } from 'antd'; import reqwest from 'reqwest'; 2、前端实现代码 class Register extends ...
  • Antd上传文件实践

    千次阅读 2020-04-03 16:49:56
    版本: "react": "^16.13.1" "antd": "^4.0.4 用antd的Form组件做了一个注册表单,注册的同时上传一个头像...2. 后端分别处理字段数据和图片数据,图片名保存到mongodb数据库,图片保存到本地 login组件 impo...
  • antd 图片上传遇到的坑----图片回显(Upload) 最近又被安排了一个前端的项目,遇到了一个图片上传的问题,用的是antd的Upload组件,在这遇到的问题和大家分享一下,下网可以帮到需要的人。(antd官网) 1.图片回显...
  • 使用antd中的Upload组件上传图片

    千次阅读 2020-04-17 15:18:52
    上传图片 支持预览和删除 新上传的图片的不支持下载功能,应该是在本地上传的图片没有找到对应的url upload文件 用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后,上传按钮消失。 import React from...
  • ###代码详情 (存在的bug:只有第一次上传剪裁是正确的,在不刷新页面的情况下再次进行剪裁会出现错误,目前没有找到...import { Button, Switch, Upload, Input, message,Modal,Icon } from 'antd'; import styles from '.
  • antd upload上传获取文件宽高

    千次阅读 2020-08-07 18:25:49
    项目新加的需求,需要判断上传图片的宽高,查了一下antd-upload组件貌似不支持这个查询,因此需要使用外部的API,直接上代码:beforeUpload 方法 handleBeforeUpload = async (file, fileList) => { const {...
  • antd的upload可以实现上传,但是其上传之后,图片列表展示都是其组件里面已经封装好的,也没有vue那种提供插槽solt的功能,但是我司需要实现在每张图片下方有个radio标签来设置主图,左思右想,是不是得直接把upload...
  • 1、为什么上传图片需要使用base64格式进行转换,再传给后端?当上传的图片很小的时候,转成base64格式较为划算。 贴代码: HTML: <a-form-item label="图片上传" :label-col="labelCol" :wrapper-col=...
  • 关于antd上传限制只能上传图片

    千次阅读 2018-06-14 15:36:28
    以下两种方法antd上传限制只能上传图片 用 getValueFromEvent: this.normFile,控制 &amp;lt;FormItem {...formItemLayout} label=&quot;客房图片&quot; colon={false}&amp;gt; &amp;lt;div ...
  • <Upload name="file"//设置为上传是文件形式 listType="picture-card" //卡片的形式展示 ...
  • vue配合antd上传多张图片

    千次阅读 2020-12-07 20:58:01
    html代码 <h2>图片</h2> <div class="content"> <a-upload action="https://xxxx" list-type="picture-card" :file-list="fileList" @preview="handlePreview" .
  • 在写需求的时候要进行宽高的校验,再进行上传,可以使用promise来进行判断,是继续resolve()还是reject() 使用示例 (直接上代码) beforeUpload = (file) => { const isJpgOrPng = file.type === 'image/...
  • 基于antd上传文件进度条

    万次阅读 2018-11-27 09:50:10
    最新新搭了一个控制台,是基于阿里antd框架搭建的,总体上来讲,antd从UI交互和组件的api上来看,还都是很好的框架了,不过还是踩了不少坑的,哈哈,后面慢慢整理出来。 这里碰到的情况是,有个上传大文件的需求,...
  • 最近在写一个需求,是批量上传视频到oss,然后自动匹配表格每一项对应的视频地址,,踩了不少坑,用antd的demo来上传oss,发现是全部一次性提交,如果文件小是没有问题的,但是一个文件上百M,同时上传几十个文件会...
  • antd上传组件upload踩坑和封装

    千次阅读 2020-06-24 15:44:38
    效果图: 1、公共组件封装: 将antd中的上传组件进行改进: 不同文件格式使用不同上传样式; 增加上传限制:大小,数量,尺寸; UploadCustom.js import { PlusOutlined, UploadOutlined } from '@ant-design/icons'...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,700
精华内容 680
关键字:

antd上传图片