Upload images in input mode

<input type="file" />
Copy the code

The input tag has the following attributes

  • Accept Sets the type of files to be uploaded. The default value is empty, indicating that files of all types can be uploaded. Common MIME types
  • Capture camera, User front camera Environment Rear camera
  • The default value of multiple is false
  • Webkitdirectory Specifies whether folders can be selected

Select files in native JS mode

ShowOpenFilePicker Selects a file. View the documentation for MDN

ShowDirectoryPicker Selects a folder. View the documentation for MDN

The 👇 code uses Vue3 as an example

<button type="text" @click="uploadFile">Copy the code
const uploadFile = async () => { try { const fileHandleList = await window.showOpenFilePicker(options); } catch (error) {window.$message.error(' this browser does not support showOpenFilePicker, please switch browser ')}};Copy the code

Options (Optional parameters)

  • Multiple Boolean Specifies whether multiple options are available
  • ExcludeAcceptAllOption Boolean Specifies whether to exclude all type options
  • Types Array, an Array of optional file types. Ten objects per element contain description and Accept
    • Description Description of the file type
    • Accept allows an object of file types. Key is the MIME types of the file and value is an array of file name extensions
Const options = {types: [{description: 'uploads only ', accept: {// "text/plain": [".txt"], // 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'], // 'application/vnd.ms-excel': ['.xls'], 'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp']}}], multiple: true, True // Whether to exclude all type options};Copy the code

The return value

The return value is an array of FileSystemFileHandle objects

attribute

  • Kind file or folderfile directory
  • Name the file name

methods

  • QueryPermission () Queries the current permission status of the current handle.
  • The read or write permission to request a file handle.
  • GetFile () returns a Promise, parsed into a File object that represents the state on disk of the item represented by the handle.
  • CreateWritable () returns a Promise that resolves to a newly created FileSystemWritableFileStream object, the object can be used to write to the file.

Select and preview the image

<div class="img-wrap">
    <img v-for="(img, index) in imgSrcList" :key="index" :src="img" alt="">
</div>
Copy the code
const imgSrcList = [];
fileHandleList.forEach(async (fileHandle: any) => {
    const file = await fileHandle.getFile();
    const buffer = await file.arrayBuffer();
    const url = URL.createObjectURL(new Blob([buffer]));
    imgSrcList.push(url);
});
Copy the code

compatibility

This is a new API that’s not compatible, and Safari doesn’t support it. You can use mixed input tags.

File download

ShowSaveFilePicker can be used to download files, but filesaver.js is recommended

<button type="text" @click="saveFile"> </button>Copy the code
Const options = {types: [{description: 'only TXT files allowed ', Accept: {"text/plain": [".txt"], } }] } const saveFile = async () => { const FileSystemFileHandle = await window.showSaveFilePicker(options); const w = await FileSystemFileHandle.createWritable(); await w.write('new data'); await w.close(); };Copy the code

DEMO

GIT