Angular 5 загружает обрезанный файл в бэкэнд PHP - PullRequest
Новая
       17

Angular 5 загружает обрезанный файл в бэкэнд PHP

0 голосов
/ 05 сентября 2018

У меня есть следующие функции, которые позволяют пользователю сделать фотографию с помощью камеры или выбрать ее из галереи, затем обрезать изображение, затем мне нужно загрузить его на сервер, используя POST и multipart / form-data Я использовал тонны методов загрузки, но ни один из них, похоже, не работает. 

public async takePicture(sourceType) {

    // Create options for the Camera Dialog
    const options = {
        quality: 100,
        sourceType: sourceType,
        saveToPhotoAlbum: false,
        correctOrientation: true,
    };

    try {
        // Get the data of an image
        const imagePath = await this.camera.getPicture(options);

        // Special handling for Android library
        let uploadedImage;
        if (this.platform.is("android") && sourceType === this.camera.PictureSourceType.PHOTOLIBRARY) {
            const filePath = await this.filePath.resolveNativePath(imagePath);
            const correctPath = filePath.substr(0, filePath.lastIndexOf("/") + 1);
            const currentName = imagePath.substring(imagePath.lastIndexOf("/") + 1, imagePath.lastIndexOf("?"));
            uploadedImage = await this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
        } else {
            const currentName = imagePath.substr(imagePath.lastIndexOf("/") + 1);
            const correctPath = imagePath.substr(0, imagePath.lastIndexOf("/") + 1);
            uploadedImage = await this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
        }

        console.log('PATH', cordova.file.dataDirectory + uploadedImage);
        this.crop.crop(cordova.file.dataDirectory + uploadedImage, {quality: 75}).then(
            newImage => {
                this.uploadedImage = newImage.replace("file://", "");

                // UPLOAD HERE
            },
            error => {
                this.presentToast("Error while selecting image.");
            }
        );
    } catch (err) {
        this.presentToast("Error while selecting image.");
    }
}


public async copyFileToLocalDir(namePath, currentName, newFileName): Promise<string> {
    const externalStoragePath: string = cordova.file.dataDirectory;
    try {
        const entry = await this.file.resolveLocalFilesystemUrl(namePath + currentName);
        const dirEntry: any = await this.file.resolveLocalFilesystemUrl(externalStoragePath);

        entry.copyTo(dirEntry, newFileName, () => { }, () => {
            this.presentToast("Error while storing file.");
        });

        return newFileName;
    } catch (error) {
        this.presentToast("Error while storing file.");
    }
}

У меня есть файл в пути, подобный файлу: /// var / mobile / Containers / Data / Application / 1FF313F5-5736-44D0-968D- 37889E3ED537 / Library / NoCloud / 1536106729187.jpg ИЛИ / var / mobile /. ../tmp/something.jpg

Я попытался загрузить их с: 

const options = {} as any; // Set any options you like
const formData = new FormData();

// Append files to the virtual form.
const file = new File();
formData.append("fsFile", this.uploadedImage, "yes");

// Send it.
this.httpClient.post("/files/upload_tmp", formData, options)
                    .toPromise()
                    .catch((e) => {
                        console.log(e);
                    });

Но formData ожидает блоб, а не путь, так что это не работает. Могу ли я использовать путь для загрузки или как преобразовать его в BLOB-объект?

Спасибо

1 Ответ

0 голосов
/ 05 сентября 2018

Cordova рекомендует использовать https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file-transfer/ для передачи файлов с телефона на сервер. Это происходит из-за кроссплатформенной поддержки и некоторых настроек для правильной работы.

Там вы получили «FileUploadOptions», в котором вы указываете путь к файлу (локальный путь на устройстве) в опциях.

Пример: 

// !! Assumes variable uploadedImage contains a valid URL to a text file on the device,
//    for example, cdvfile://localhost/persistent/path/to/file.txt
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = uploadedImage.substr(uploadedImage.lastIndexOf('/') + 1);
options.mimeType = "text/plain";

var ft = new FileTransfer();
ft.upload(uploadedImage, encodeURI("http://some.server.com/upload.php"), SUCCESS_FUNCTION, ERROR_FUNCTION, options)
...