Rumah > hujung hadapan web > uni-app > teks badan

Cara UniApp melaksanakan muat naik dan pemangkasan imej

WBOY
Lepaskan: 2023-07-06 10:01:13
asal
3172 orang telah melayarinya

UniApp ialah rangka kerja pembangunan aplikasi merentas platform berdasarkan Vue.js, yang boleh membangunkan aplikasi dengan pantas untuk kedua-dua platform iOS dan Android. Dalam UniApp, memuat naik dan memangkas imej adalah keperluan biasa. Artikel ini akan memperkenalkan cara untuk melaksanakan muat naik dan pemangkasan imej dalam UniApp, dan memberikan contoh kod yang sepadan.

1. Cara melaksanakan muat naik imej:

  1. Gunakan kaedah uni.uploadFile() untuk memuat naik imej. Mula-mula, anda perlu menentukan URL muat naik, laluan sementara fail, nama fail dan parameter lain dalam kaedah uni.uploadFile(). Contohnya adalah seperti berikut:

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);
  }
});
Salin selepas log masuk

}
});

  1. Terima dan simpan imej yang dimuat naik di sebelah pelayan. Bahagian pelayan boleh menggunakan pelbagai bahasa belakang (seperti Node.js, PHP, Java, dll.) untuk menulis antara muka yang sepadan untuk menerima dan menyimpan imej yang dimuat naik. Contohnya, menggunakan Node.js dan rangka kerja Express, anda boleh menulis antara muka berikut:

const express = require('express'
const multer = require('multer'

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

app.post('/upload', upload.single('file'), (req, res) => {
console. log('gambar Disimpan', req.file);
res.send('Gambar berjaya dimuat naik');
});

app.listen(3000, () => {
console.log('Pelayan bermula ') ;
});

2. Cara melaksanakan pemangkasan imej:

  1. Gunakan pemalam pemangkasan imej pihak ketiga seperti pemangkas imej. Mula-mula, pasang pemalam pemangkas imej dalam projek UniApp. Ia boleh dipasang melalui arahan npm atau dalam pasaran pemalam. Selepas pemasangan selesai, perkenalkan komponen pemangkas imej ke dalam halaman yang anda perlukan untuk menggunakan fungsi pemotongan imej: