Convert blob temporary path to File object

Convert blob temporary path to File object

I Taro-UIfound a problem when using it recently .

Problem appearance

When uploading an image, Taro-UIonly an image selector is provided to return the temporary path of the image, similar to the following:

{
    
    
   "url":"blob:http://10.1.10.122:10086/4ebc5d64-bd9a-4994-8212-addf476ba2c2",
   "file": {
    
    
       "path":"blob:http://10.1.10.122:10086/4ebc5d64-bd9a-4994-8212-addf476ba2c2",
       "size":370876,
       "type":"image/jpeg",
       "lastModifiedDate":"2020-12-23T02:38:35.661Z","lastModified":1608691115661,
       "name":"1608691115661.jpeg"
   }
}

You can see the basic information of the picture (size, type, long transfer time, picture name). All are included, including a blob:http:temporary path starting with.

Solutions

This can't be passed directly to the backend, it needs to be converted to a Fileformat and passed through the multipart/form-dataprotocol.

solution

Convert the temporary path into an Fileobject and add it form-data.

// 其中
// imgObj = 上面那个对象
// imgObj.url = blob:http://10.1.10.122:10086/4ebc5d64-bd9a-4994-8212-addf476ba2c2

const imgBlob = await fetch(imgObj.url). then(r => r.blob())
const imgFile = new File([imgBlob], imgObj.file.name , {
    
     type: imgBlob.type })
const formData = new FormData();
formData.append("file", imgFile);
const res: any = await http.post("/api/uploadFile",formData);