The local picture upload server is transferred to base64.

choose the picture locally and upload it to the server through ajax. Do not want to use the form form, use the fileReader of h5 to report an error, how to solve

converted code

convertToBase64() {
    let fileReader = new FileReader()
    //2m
    const AllowImgFileSize = 2100000
    let imgUrlBase64;

    imgUrlBase64 = fileReader.readAsDataURL("https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg")
    fileReader.onloadend = function() {
      if (AllowImgFileSize != 0 && AllowImgFileSize < fileReader.result.length) {
        alert( "2M")
        return
      }else{
        console.log(imgUrlBase64)
        //
        console.log(fileReader.result);
      }
    }
  }

now it is dead to pass an online image address, which is actually the value obtained by input (type=file)

.

clipboard.png

clipboard.png

I really don"t know how to solve it. I use fileReader for the first time.
this is the simplest. Is there any other simple and feasible way? Using the react framework

Jun.08,2021

Select the picture locally and upload it to the server through ajax. You don't want to use the form form

you can only use multipart/form-data to upload pictures, which is what you call the form form. Because other body usually accept length limits, if you want to use base64 , you must ask the backend to support your length, and if you are attacked by body messages long enough at the same time, you will directly GG.

in fact, when you select a file in input=file , you return File . Just upload it with ajax through the FormData interface, while you can't get local images in other ways. Do you want to upload to remote image server 2 through remote image server 1? If you really want to do this, you can change it to blob and upload it the way mentioned above. (strange demand)

The argument to

readAsDataURL () is not the url of a string, it should be a blob or file object. I feel that I should first use xhr to get the real picture file


how can you read the local file and get the file path of a server? FileReader is based on Blob and can only read files of Blob:// type. After users select local files, you also get Blob type. Your problem here is the problem of path

Menu