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

React.js html5 javascript
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

Previous: Vue-countdown countdown cannot set time dynamically

Next: Where is the MSE interface used by video.core.js? video.js has two requests for m3u8 and the ts in it.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2addf-2ba47.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2addf-2ba47.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?