The createObjectURL() function allows you to quickly preview images or videos before uploading them.

Url.createobjecturl ()

The url.createObjecturl () static method creates a DOMString with a URL representing the object given in the argument. The lifecycle of this URL and the Document binding in the window that created it. This new URL object represents the specified File object or Blob object.

Source: the MDN

A simple way of thinking about it is to convert an object of type file or Blob to a UTF-16 string and save it under the document of the current operation.

Extension 1: The difference between UTF-8 and UTF-16 and GBK is that the encoding is kept in memory/file after the Unicode code value is converted to the corresponding rules

It’s another story in detail. Don’t worry about the details.

Url.createobjecturl (

The preview function for this topic, of course.

And so on. ReadAsDataURL (file) to Base64.

Ok, next topic.

CreateObjectURL () and Filereader.readasdataurl ()

If you know how to use the Filereader.readasDataURL (file) method, read on to compare the advantages and disadvantages.

  1. The return value

    • FileReader.readAsDataURL(file)I can get a sectionbase64String of.
    • URL.createObjectURL(file)Can get one of the current filesMemory is the URL.

  2. Memory usage

    • FileReader.readAsDataURL(file)The return value of is the converted lengthbase64String (the length is positively related to the size of the file being parsed).
    • URL.createObjectURL(file)The return value of is a string, but is aurlAddress.

  3. Memory clean

    • FileReader.readAsDataURL(file)Automatically clean from memory according to THE JS garbage collection mechanism.
    • URL.createObjectURL(file)In the presentdoucmentIn, the clearance mode is onlyunload()Event orrevokeObjectURL()Manually clear.

  4. Enforcement mechanism

    • FileReader.readAsDataURL(file)It is returned as a callback and executed asynchronously.
    • URL.createObjectURL(file)Return directly and execute synchronously.

  5. compatibility

    • CompatibilityIE10All the above are supported by other browsers.

  6. other

    • ReadAsDataURL (file) When multiple files are processed at the same time, a new FileReader object is required for each file.

    • Url.createobjecturl (file) Returns in sequence without impact.

On the whole

Url.createobjecturl (file) Displays the URL of the local memory container, which is easy to preview. If you use it repeatedly, you need to manually release the memory, which provides excellent performance. FileReader. ReadAsDataURL (file) is directly converted to Base64 format, which can be directly used for business without secondary conversion.

As for the problem of using canvas to capture the first frame of a video, I will come to it in the next article.

Add 1: Base64 to Blob

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(', '), mime = arr[0].match(/:(.*?) ; /)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}
Copy the code