The front-end FileReader object realizes image file conversion to base64

1. The specific code for converting file to base64

// 图片file转base64方法（file文件，回调函数）
  fileToBase64(file, callback) {
    
    
    // 创建FileReader对象（不兼容IE）
    let reader = new FileReader();
    // 将file转为base64 （异步操作）
    reader.readAsDataURL(file); 
    // 转换成功
    reader.onload = () => {
    
    
      const response = {
    
    
        status: true,
        data: reader.result
      }
      callback(response);
    };
    // 转换失败
    reader.onerror = function () {
    
    
      const response = {
    
    
        status: false,
        data: reader.error
      }
      callback(response);
    };
  }

// 调用方法
fileToBase64(imgFile, (res) => {
    
    
  if(res.status) {
    
    
    console.log('file转化成base64成功---',res.data)
  } else {
    
    
    console.log('file转化base64失败---',res.data)
  }
})

2. Principle analysis

The principle of the method encapsulated above is mainly to use FileReaderthe object to realize the conversion of the image format. The method FileReaderin the object readAsDataURL()can read a Fileor Blobtype of file and convert it into a string in base64 format. But one thing to note is that readAsDataURL()when we read a file through a method, it is an asynchronous operation, so we need to FileReaderpass the result of the file type conversion to the method through a callback function in the onload event or onerror event of the object the caller.

And the most important point: this method is not compatible with IE.

3. `FileReader`Object

The objectFileReader can asynchronously read files on the user's computer, but only in a safe way (after obtaining the file through <input>, DataTransferetc.), read the corresponding Fileor Blobtype of file, and cannot read the user's storage according to the file path corresponding file.

Browser Compatibility:

insert image description here

① `FileReader`There is only one way to create an object, and that is the constructor:

// 创建FileReader对象
let reader = new FileReader();

② Common attributes

:error Indicates the error message returned when an error occurs while reading the file.

:readyState Indicates the current FileReaderstate of the object, with three values: 0—no data is read, 1—data is being read, 2—data reading is completed or terminated.

:result Indicates the result of reading the file and converting the format. The format of the result depends on the reading method used.

③ Object event

:onload This event is triggered when the read operation is completed. At this time, you can reader.resultget the result of reading the file and converting the format.

:onerror This event is triggered when an error occurs in the read operation. At this time, you can reader.errorget the corresponding error message.

:onabort This event is triggered when the read operation is interrupted.

④ Common methods

:readAsDataURL(file) Read a file or Blob file, convert it to base64a format, and store it in reader.result.

:readAsArrayBuffer(file) Read a file or Blob file, convert it to ArrayBuffera format, and store it in reader.result.

:readAsText(file[,encoding]) Read a file or Blob file, and convert it to a string format (the default is UTF-8 format) according to the encoding type set by the second parameter, and store it in reader.result.

:abort() Terminates an ongoing read operation.

4. Related documents

The front end of FileReader
uses Canvas to compress pictures. Two methods.
The front end converts base64 pictures into file files.