Question

我正在使用multer处理将图片上传到我的Next.js应用。

令人困惑的问题是上载的图像不持久。

这是ImageUploader.js组件：

import React, { Component } from 'react';
import './ImageUploader.css';
import Modal from '../Modal/MyModal.jsx'
import axios from 'axios';


import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { loadAvatar } from '../../store/reducers/users/index'
import { modalStateOn, modalStateOff } from '../../store/reducers/ui/index'


// base api url being used
class ImageUploader extends Component {
 constructor(props) {
  super(props);
 }

 componentDidMount() {
  this.setDefaultImage()
 }

 componentDidUpdate(previousProps, previousState) {
  if (previousProps.userAvatar !== this.props.userAvatar) {

  console.log("this.props.userAvatar in componentDidUpdate", this.props.userAvatar);
   loadAvatarImage(this.props.userAvatar)
  }
 }

 setDefaultImage(){
   var defaultImage =  '../../static/profile-avatars/assets/default-img.jpg';
    this.loadAvatarImage(defaultImage)
 }

 loadAvatarImage(img) {
    var { loadAvatar } = this.props;
     loadAvatar(img)
 }
 // function to upload image once it has been captured
 // includes multer and firebase methods
 uploadImage(e, method) {
  let imageObj;

  imageObj = {};
  if (method === "multer") {

   let imageFormObj = new FormData();

   imageFormObj.append("imageName", "multer-image-" + Date.now());
   imageFormObj.append("imageData", e.target.files[0]);
   this.loadAvatarImage(window.URL.createObjectURL(e.target.files[0]))

   axios.post(`http://localhost:8016/images/uploadmulter`, imageFormObj)
    .then((data) => {
     if (data.data.success) {
      console.log("data ", data);
      this.setDefaultImage();
     }
    })
    .catch((err) => {
     alert("Error while uploading image using multer");
      this.setDefaultImage();
    });
  }
 } // end upload function

 render() {
  // var {imageUploaded} = this.state;
  var {  userAvatar } = this.props
 console.log("this.props ImageUploader", this.props);
  return (
   <>
    <div className="main-container">
     <h3 className="main-heading">Image Upload App</h3>

     <div className="image-container">
      <div className="process">
       <h4 className="process__heading">Process: Using Multer</h4>
       <p className="process__details">Upload image to a node server, connected to a MongoDB database, with the help of multer</p>
       <form action="/uploadmulter" method="post" encType="multipart/form-data" >
        <input type="file" name="avatar" className="process__upload-btn" onChange={(e) => this.uploadImage(e, "multer")} />
        <img src={userAvatar} alt="upload-image" className="process__image" />
       </form>
      </div>
     </div>
    </div>
  </>
  );
 }
}

function mapStateToProps(state) {
 const { ui, users } = state
 const { isLoggedIn, userAvatar } = users
 const { modalActive } = ui

 return { isLoggedIn, userAvatar, modalActive }
}

const mapDispatchToProps = dispatch =>
 bindActionCreators({ loadAvatar, modalStateOn, modalStateOff }, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(ImageUploader)

我认为这两种生命周期方法对于我来说到底是怎么回事...

 componentDidMount() {
  this.setDefaultImage()
 }

 componentDidUpdate(previousProps, previousState) {
  if (previousProps.userAvatar !== this.props.userAvatar) {

  console.log("this.props.userAvatar in componentDidUpdate", this.props.userAvatar);
   loadAvatarImage(this.props.userAvatar)
  }
 }

但是console.log中的componentDidUpdate甚至没有触发？

在这里您可以看到加载图像动作被多次触发？

有任何想法为什么会发生这种情况以及如何保持我的形象？

谢谢您的投入！

Answer 1

在我看来问题出在这里：

loadAvatarImage(img) {
    var { loadAvatar } = this.props;
     loadAvatar(img)
 }

您直接调用loadAvatar操作，而不是通过Redux调度它。也许尝试将其更改为

loadAvatarImage(img) {
    var { loadAvatar } = this.props;
     this.props.loadAvatar(img)
 }

Redux状态更新，无需调度

1 个答案: