作為react-native 的初級(jí)小白昧旨，項(xiàng)目中遇到文件上傳的問(wèn)題贝奇，遇到了一些坑點(diǎn)成玫，記錄如下：
- 第三方庫(kù)的選擇
react-native-image-crop-picker 可以支持拍照绿渣，從相冊(cè)中進(jìn)行選擇照片和對(duì)照片的裁剪宴咧。
坑點(diǎn)：- iOS打開(kāi)手機(jī)的相冊(cè)根灯，需要用setTimeout 做延時(shí)處理，不然會(huì)出現(xiàn) 手機(jī) 相冊(cè)彈出后又立刻關(guān)閉掺栅，再次點(diǎn)開(kāi)相冊(cè) 會(huì)死機(jī)的情況烙肺。
setTimeout(() => {
ImagePicker.openPicker({
cropping: cropit,
cropperCircleOverlay: circular,
includeExif: true,
}).then(image => {
this.formatUploadData(image);
});
}, 1000);
壓縮的問(wèn)題，壓縮不能使體積壓縮到某個(gè)固定值之下氧卧。因?yàn)樾枰膮?shù)中桃笙，只能填入了壓縮的質(zhì)量。例如：當(dāng)圖片的體積小于1M的時(shí)候沙绝，本來(lái)不需要壓縮的圖片搏明，必要要壓縮。當(dāng)體積為幾十M 的時(shí)候闪檬，即使壓縮也會(huì)大于1M星著。所以 對(duì)于 體積的壓縮是無(wú)法控制的，這個(gè)問(wèn)題還沒(méi)有解決粗悯。
壓縮后圖片的質(zhì)量下降虚循，預(yù)覽圖片的時(shí)候圖片的質(zhì)量嚴(yán)重受到 影響。
- 文件的上傳
react-native中對(duì)于文件的類型的上傳样傍，解決方法：用form data.
const formData = new FormData();
const file = {
uri: image.path,
type: image.mime,
name:image.name,
size: image.size,
};
formData.append('file', file);
// 調(diào)用文件上傳的方法
FormData()是js 中的方法横缔，不用引入可以直接用，如果使用的時(shí)候代碼中報(bào)錯(cuò)衫哥，那么可能是eslint 的問(wèn)題哦茎刚！
- 預(yù)覽圖片
圖片預(yù)覽的時(shí)候，需要從后端拉取圖片撤逢。后端小伙伴給的接口中膛锭，在瀏覽器中測(cè)試API捌斧，發(fā)現(xiàn) 調(diào)用API 后直接就從瀏覽器上download 下來(lái)了圖片。但在項(xiàng)目中 使用 Axios庫(kù)泉沾，請(qǐng)求 會(huì)獲取200成功捞蚂，但拿不到圖片的資源。
解決辦法：- 網(wǎng)上使用了一種方法： rn-fetch-blob跷究，可以獲取圖片姓迅，但是我沒(méi)有采用，因?yàn)樵搸?kù)使用了fetch 發(fā)請(qǐng)求俊马，如果我們使用 fetch 的話丁存，則需要獲取 登錄的token ,而登錄是一套及其復(fù)雜的邏輯，這里不方便使用柴我。
- 我們采用了另一種方法解寝，讓后端修改了接口，返回了圖片的base 64 碼艘儒，而 react-native 中的Image 方法可以接受將base 64 的碼轉(zhuǎn)化為圖片聋伦，所以解決了問(wèn)題。
- 圖片緩存
圖片緩存使用庫(kù)react-native-fs,將圖片存入文件中界睁，放入App 的緩存目錄下RNFS.CachesDirectoryPath, 預(yù)覽圖片的時(shí)候 先判斷路徑是否存在觉增，如果存在，則直接讀取翻斟，如果不存在逾礁，先 download 圖片，然后存入文件中访惜。App 清理緩存的時(shí)候嘹履，則可以直接 清楚 cache 目錄下的文件即可。
