鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ react中使用formdata獲取不了表單要上傳的文件?react中應(yīng)該怎么上

react中使用formdata獲取不了表單要上傳的文件?react中應(yīng)該怎么上傳文件?

1、在react中有個(gè)form表單,包含text,radio和file,可是js代碼創(chuàng)建formDate時(shí)獲取不到file的信息,請(qǐng)問該怎么去獲取。
2、代碼如下:
render的代碼:

<form ref="addForm" className="addForm" id="addForm" enctype="multipart/form-data" method="post">
                        <div className="formType" >
                            <label htmlFor="type" className="col-sm-1 control-label">物料類型</label>
                            <input type="radio" name="type" value="1" checked={this.state.type =="1"} onChange={this.handleChange} />圖片
                            <input type="radio" name="type" value="2" checked={this.state.type =="2"} onChange={this.handleChange} />視頻
                        </div>
                        <div className="formWidth">
                             <label htmlFor="materialWidth">物料寬</label>
                             <input type="text" id="materialWidth" name="width" value={this.state.width} onChange={this.handleChange} placeholder="物料寬度" />
                        </div>
                        <div className="formHeight">
                            <label htmlFor="materialHeight">物料高</label>
                            <input type="text" id="materialHeight" name="height" value={this.state.height} onChange={this.handleChange} placeholder="物料高度"  />
                        </div>
                        <div className="formUpload">
                            <label htmlFor="uploadMaterial">上傳文件</label>
                            <input ref="material" id="uploadMaterial" name="files" type="file" />
                        </div>
                        <div className="submit">
                            <button type="button" className="btn btn-success" onClick={(event)=>{this.handleSubmit(event)}}>提交</button>
                        </div>
                    </form>

js的代碼:

getInitialState: function() {
    return {
            type: "",
            width:"",
            height:"",
            "tab":"explain"
        };
  },
  handleChange: function(event) {
        var newState={};
        newState[event.target.name]=event.target.name=="checked"?event.target.checked:event.target.value;
        this.setState(newState);
  },
   handleSubmit: function(event){
        var formDate = new FormData($("#addForm")[0]);
        }

只取到這三個(gè)值:
clipboard.png

回答
編輯回答
放開她

用了append方法,把上傳的文件添加到FormData里面

2018年7月14日 09:58