如何在函数中打开文件选择器

Question

我正在使用 quill 编辑器并使用图像处理程序来上传图像，它曾经可以正常工作，但现在我正在转向服务器端渲染，并发现“文件选择器对话框只能在用户激活时显示”的错误。在尝试打开文件选择器以上传文件时。

imageHandler() {
    // 
   
    let self=this
    let image;
    let image_extension;
    
    
      
      var input = document.createElement("input");

      // Set its type to file
      input.type = "file";
  
      // Set accept to the file types you want the user to select. 
      // Include both the file extension and the mime type
      input.accept = "accept";
  
      // set onchange event to call callback when user has selected file
      input.addEventListener("change", onchange)
      
      // dispatch a click event to open the file dialog
      input.dispatchEvent(new MouseEvent("click")); //getting the error in this line.
   

      input.onchange = async () => {
      //
        const file = input.files[0];

        var ValidImageTypes = ["image/gif", "image/jpeg", "image/png", "image/jpg", "image/GIF", "image/JPEG", "image/PNG", "image/JPG"]; 
        let file_type = file.type
        let filename = file.name
        let extension = filename.split('.').pop();
        //  debugger
        if(ValidImageTypes.indexOf(file_type) >= 0){
          if(file.size<=500000&&file.size>=50000){
          //  debugger
            var fileToLoad = file
    
            // loadImage(fileToLoad, (canvas) => {
             
              // if(canvas){
               // this.setState({
                  // image=canvas.toDataURL()
                  // image_extension=extension
                // });


                this.getBase64(file)
                .then(result => {
                  // debugger
                  file["base64"] = result;
                  console.log("File Is",file.base64 );
              
               
                const res = new Promise(function(resolve, reject) {
                  axios({
                    method:'post',
                    url:API_URL+'api/v1/postblogimage',
                    headers:{
                      'x-access-handler':loggedinUser.token
                    },
                    data:{
                      image: file.base64,
                      image_extension:image_extension,
                      userid:loggedinUser.userid
                    }
                  })
                  //axios.post(API_URL + 'api/v1/postblogimage', formData, config)
                  .then((response) => {
                    
                    if (response.data.error == 'false' || response.data.error == false) {
                      if (response.data.status == 200 && response.data.message == "Image uploaded successfully") {
                        
                       //
                          const range = self.quill.getSelection(true);
          
                          // Insert temporary loading placeholder image
                          // this.quill.insertEmbed(range.index, 'image', `${window.location.origin}/images/loaders/placeholder.gif`);
                  
                          // Move cursor to right side of image (easier to continue typing)
                          self.quill.setSelection(range.index + 1);
                  
                        
                          // Remove placeholder image
                          self.quill.deleteText(range.index, 1);
                  
                          // Insert uploaded image
                          let url=response.data.data[0].imageURL;
                          self.quill.insertEmbed(range.index, 'image', url);
                          self.quill.pasteHTML(range.index, <img src={url} class="blog-image-content" alt="Responsive image"/>);
            
                        
                      }
                     
                    }
                    // else if(response.data.error == 'true' || response.data.status == '500')
                    // componentProps.error('Sorry, Inappropriate image')
                  
                    // } 
          
                  }).catch((error) => {
                    // reject(Error("It broke"));
                  });
                
                
                });
              // }
             
            // }, {orientation: true});
          // }
              })
            }
          else{
            
            // componentProps.error(" Sorry, File size should be of size between 50 kb to 500kb")
          }
        }
        else{
         // this.setState({
            // image_warning:'Invalid image type',
            // image:'',
            // image_extension:''
          //})
         // this.fileInput.value=''
        }
     

       
    };
}





//render function 
<ReactQuill
         ref={(el) => this.quillRef = el
      }
      onChange={this.handleChange}
      placeholder={"You can insert images between your blog as well. Max image size to not exceed 500kb.Once you have uploaded an image, just wait, image will show up, if it is approved. Use #hashtags to highlight keywords/impact-terms in your blog, your blog might show up in trending keywords. Example: #gain"}
                  modules={{
                    toolbar: {
                        container: [
                            [{ header: '1' }, { header: [2,3, 4, 5, 6] }, { font: [] }],
                            [{ size:   [ 'small', false, 'large', 'huge' ] }],
                            ['bold', 'italic', 'underline', 'strike', 'blockquote'],
                            [{ list: 'ordered' }, { list: 'bullet' }],
                        
                            ['link', 'image', 'video'],
                            ['clean'],
                            ['code-block'],
                            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                            
                            [{ 'align': [] }],
                          
                           
                        ],
                        handlers: {
                          image: this.imageHandler
                      }
                    }
                }}
                  />

Answer 1

在单击之前，您必须将输入添加到文档正文中

document.body.appendChild(input);