比较来自世界各地的卖家的域名和 IT 服务价格

使用redux形式加载图像

我有 react.js Redux形式，工作并将数据发送回我的数据 API, 但是，我还需要允许发件人携带窗体，理想地与预览。 我争吵了一点，得了 dropzone.js, 但似乎我不能让我的表格真的 POST 返回图像数据。


render // {

 const FILE_FIELD_NAME = 'files';



 const renderDropzoneInput = /field/ => {

 const files = field.input.value;

 return /

 <div>

<dropzone =="" e="" filestoupload,="" name="{field.name}" ondrop="{/"> field.input.onChange/filesToUpload/}

 &gt;

 <div>Try dropping some files here, or click to select files to upload.</div>

</dropzone>

 {field.meta.touched &amp;&amp;

 field.meta.error &amp;&amp;

 <span classname="error">{field.meta.error}</span>}

 {files &amp;&amp; Array.isArray/files/ &amp;&amp; /

 <ul>

 { files.map//file, i/ =&gt; <li key="{i}">{file.name}<img src="{file.preview}/"/></li>/ }

 </ul>

 /}

 </div>

 /;

 }



 return /

 <form onsubmit="{this.props.handleSubmit/this.onSubmit/}">

<div classname="form-group">

<field component="{renderDropzoneInput}" name="files"></field>

</div>

<button classname="btn btn-default" type="submit">Submit</button>

</form>

 /;

}


多变的
files

真的回报 POSTed 返回K. API, 什么是精彩的，但它包含以下内容：


[preview=blob:[url=http://localhost:3000/bed3762e-a4de-4d19-8039-97cebaaca5c1]http://localhost:3000/bed3762e ... ca5c1[/url]]


有人可以告诉我如何在这个变量中获得实际二进制数据，请？

这里提供的完整代码
https://github.com/rushughes/d ... ex.js
2021-03-20 添加评论
分享

没有找到相关结果

    已邀请:

    石油百科

    赞同来自:

    我最近有一个类似的问题，我决定了它 FileReader API 转换blob对象 url 在 Base64 /您还可以转换为二进制字符串/.

    然后你发送 Base64 或二进制字符串到服务器。

    我的示例代码：


    onDrop/acceptedFiles: any/: any {
    

    
 let images: any = this.state.Images;
    

    
 acceptedFiles.forEach//file: any/ => {
    

    
 const reader: FileReader = new FileReader//;
    
 reader.onload = // => {
    
 const fileAsBase64: any = reader.result.substr/reader.result.indexOf/","/ + 1/;
    
 images.push/fileAsBase64/;
    
 };
    

    
 reader.onabort = // => console.log/"file reading was aborted"/;
    
 reader.onerror = // => console.log/"file reading has failed"/;
    

    
 reader.readAsDataURL/file/;
    
 }/;
    

    
 this.setState/prevState => /{ 
    
 Images: images,
    
 }//;
    
}


    如果要发送二进制字符串 base64, 修正案
    reader.readAsDataURL/file/;

    在
    reader.readAsBinaryString/file/;


    这行：
    const fileAsBase64: any = reader.result.substr/reader.result.indexOf/","/ + 1/;

    可以在之前简化
    const file: any = reader.result;
    2021-03-20 0 0
    分享

    诸葛浮云

    赞同来自:

    以下是该功能的步骤
    file-upload

    : /如何处理您的图像数据 API/

    添加您的值 redux-form 到

    复制 FormData.


    let formData = new FormData//;
    
formData.append/'myFile', files[0]/;


    发送请求
    multipart/form-data

    从客户到您的图书馆 API 与图书馆

    https://github.com/axios/axios
    或者
    fetch

    :

    获取此查询
    multipart/form-data

    在你的 API, 继续它

    https://github.com/expressjs/multer
    , 然后写入文件
    disk storage

    或者
    memory storage

    通过以下方式：


    $ npm install --save multer



    const multer = require/'multer'/
    

    
const storage = multer.diskStorage/{
    
 destination: function /req, file, cb/ {
    
 cb/null, '/tmp/my-uploads'/
    
 },
    
 filename: function /req, file, cb/ {
    
 cb/null, file.fieldname + '-' + Date.now///
    
 }
    
}/
    

    
const upload = multer/{ storage: storage }/
    

    
const app = express//
    

    
app.post/'/upload', upload.single/'myFile'/, /req, res, next/ => {
    
 // req.file is the `myFile` file
    
 // req.body will hold the text fields, if there were any
    
 }/


    /选修的/ 与文件一起使用文件 API

    http://expressjs.com/en/starter/static-files.html
    2021-03-20 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    Copyright © 2023, All Rights Reserved