用React和Apollo（GraphQL）上传图像到Cloudinary

Question

const UploadImageComponent = () => {
    const { user } = useContext(AuthContext)
    const [fileInput, setFileInput] = useState('')
    const [selectedFile, setSelectedFile] = useState('')
    const [previewSource, setPreviewSource] = useState();

    function handleSubmit(e){
        const file = e.target.files[0]
        previewFile(file);
    }

    const previewFile = (file) => {
        const reader = new FileReader();
        reader.readAsDataURL(file)
        reader.onloadend = () => {
            setPreviewSource(reader.result)
        }
    }

    const handleSubmitFile = (e) => {
        e.preventDefault()
        if(!previewSource) return;
        uploadImage()
    }
    const [addImage] = useMutation(ADD_IMAGE, {
        variables: {
            userID: user.id,
            photo: JSON.stringify(previewSource)
        }
    })
    const uploadImage = () => {
       addImage();
    }

    return (
        <>
        <Form onSubmit={handleSubmitFile}>
            <Form.Input 
                type="file"
                name="image"
                onChange={handleSubmit}
                value= {fileInput}
            />
            <Button type="submit">
                Submit
            </Button>
        </Form>
        {previewSource && (
            <img src={previewSource} alt="coolest-ever" style={{height: '300px', width: '300px'}}/>
        )}
        </>
    )
}

const ADD_IMAGE = gql`
    mutation($userID: ID!, $photo: String!){
        addImage(userID: $userID, photo: $photo){
            id 
        }
    }
`

 async addImage(_, { userID, photo }, context){  //photo is given as type: String!
            const user = checkAuth(context);

            if(!user) throw new AuthenticationError('Not Logged In')

            const imgUpload = await cloudinary.uploader.upload(photo)
            
            let userProfile = await User.findById(userID)
                
            if(user){

                await User.updateOne({_id: userID}),{
                    $set: {
                        photo: imgUpload.url
                    }
                }

                const newUserProfile = await User.findById(userID)

                return newUserProfile
            }else{
                throw new Error('Unknown Error')
            }
            
        }

Answer 1

下面是如何使用React上传的示例代码：

  formdata.append("file", file);
    formdata.append("cloud_name", "<cloud name>");
    formdata.append("upload_preset", "<upload preset>");

    let res = await fetch(
      "https://api.cloudinary.com/v1_1/shirly/auto/upload",
      {
        method: "post",
        mode: "cors",
        body: formdata
      }
    );

    let json = await res.json();
    console.log(JSON.stringify(json.secure_url));
  };

  render() {
    return (
      <div>
        <h3>Upload</h3>
        <input type="file" onChange={this.processFile} />
      </div>
    );
  }
}
ReactDOM.render(<Upload />, document.getElementById("container"));

https://codesandbox.io/s/jq4wl1xjv?from-embed=&file=/src/index.js请注意，您需要在正确的位置设置云名称和未签名上传预置。

另请注意，您可能需要考虑使用上传小部件，例如在React中:http://jsfiddle.net/raystra/gevc4ktm/