Wie UniApp das Hochladen und Zuschneiden von Bildern implementiert

UniApp ist ein plattformübergreifendes Anwendungsentwicklungs-Framework auf Basis von Vue.js, mit dem schnell Anwendungen für iOS- und Android-Plattformen entwickelt werden können. In UniApp ist das Hochladen und Zuschneiden von Bildern eine häufige Anforderung. In diesem Artikel wird erläutert, wie das Hochladen und Zuschneiden von Bildern in UniApp implementiert wird, und es werden entsprechende Codebeispiele bereitgestellt.

1. So implementieren Sie das Hochladen von Bildern:

1. Verwenden Sie die Methode uni.uploadFile(), um Bilder hochzuladen. Zunächst müssen Sie die Upload-URL, den temporären Pfad der Datei, den Dateinamen und andere Parameter in der Methode uni.uploadFile() angeben. Ein Beispiel ist wie folgt:

uni.chooseImage({
count: 1,
success: function (res) {

uni.uploadFile({
  url: 'https://example.com/upload',
  filePath: res.tempFilePaths[0],
  name: 'file',
  success: function (res) {
    console.log('图片上传成功', res);
  },
  fail: function (res) {
    console.log('图片上传失败', res);
  }
});

}
});

2. Empfangen und speichern Sie das hochgeladene Bild auf der Serverseite. Die Serverseite kann verschiedene Back-End-Sprachen (wie Node.js, PHP, Java usw.) verwenden, um entsprechende Schnittstellen zum Empfangen und Speichern hochgeladener Bilder zu schreiben. Mit Node.js und dem Express-Framework können Sie beispielsweise die folgende Schnittstelle schreiben:

const express = require('express');
const app = express( );

const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {

console. log('Bild gespeichert', req.file);

res.send('Bild erfolgreich hochgeladen');
});

app.listen(3000, () => {

console.log('Server gestartet ') ;

});

2. So implementieren Sie das Zuschneiden von Bildern:

Verwenden Sie ein Bildzuschneide-Plug-in eines Drittanbieters, z. B. Image-Cropper. Installieren Sie zunächst das Image-Cropper-Plugin im UniApp-Projekt. Es kann über den Befehl npm oder im Plug-in-Markt installiert werden. Nachdem die Installation abgeschlossen ist, fügen Sie die Bildzuschneidekomponente auf der Seite ein, auf der Sie die Bildzuschneidefunktion verwenden müssen: