Mari kita bincangkan tentang operasi muat naik dan pemadaman foto Uniapp

Dalam beberapa tahun kebelakangan ini, Uniapp telah menjadi pilihan pertama untuk semakin ramai pembangun dalam bidang pembangunan aplikasi mudah alih. Uniapp ialah rangka kerja pembangunan baharu yang melaluinya pembangun boleh membangunkan aplikasi berbilang terminal, sekali gus meningkatkan kecekapan pembangunan jurutera. Artikel ini akan memberikan pengenalan dan penjelasan terperinci tentang operasi muat naik dan pemadaman foto Uniapp.

1. Pelaksanaan muat naik imej

Kamera dan pemilihan imej ialah salah satu fungsi biasa Uniapp menyediakan antara muka API yang kaya untuk membolehkan kamera, album foto, WeChat Moments, fail dalam talian, dll. Pelbagai cara untuk memilih dan memuat naik imej boleh dilakukan. Di bawah ini kami akan memperkenalkan secara terperinci bagaimana antara muka API Uniapp melaksanakan fungsi muat naik imej.

1. Pilih gambar dan muat naiknya

Uniapp menyediakan komponen yang sangat mudah digunakan, uni-upload, yang boleh memuat naik fail secara tidak segerak Seterusnya, anda boleh memilih melalui fungsi muat naik imej.

Mula-mula tambahkan kod berikut pada halaman hujung hadapan:

<view>
   <uni-upload :upload-url="&#39;your_upload_url&#39;" :on-success="success" :on-fail="fail" @click="upload">
     <view class="button">上传图片</view>
   </uni-upload>
</view>

Dalam kod ini, kami mentakrifkan komponen uni-upload, dengan atribut upload-url ialah alamat URL bagi muat naik imej on-success dan on-fail masing-masing sepadan dengan fungsi panggil balik untuk kejayaan dan kegagalan muat naik. @clickAtributnya adalah untuk mencetuskan fungsi muat naik selepas mengklik.

Kemudian kita perlu mengkonfigurasi dua fungsi panggil balik success dan fail dalam contoh Vue:

methods: {
   success(res){
     console.log("上传成功");
   },
   fail(err){
     console.log("上传失败");
   },
   upload(){
     uni.chooseImage({
       sizeType: ['compressed'],
       sourceType: ['album', 'camera'],
       success: (res) => {
         const tempFilePaths = res.tempFilePaths;
         uni.uploadFile({
           url: this.uploadUrl,
           filePath: tempFilePaths[0],
           name: 'file',
           success: (res) => {
            this.success(res)
           },
           fail: (err) => {
            this.fail(err)
           }
         });
       }
     });
   }
}

Dalam kod ini, kita tentukan dahulu success dan fail Dua fungsi panggil balik Apabila muat naik berjaya atau gagal, fungsi panggil balik yang sepadan akan dilaksanakan. Dalam fungsi upload, kami menggunakan kaedah uni.chooseImage untuk memilih imej, mendapatkan laluan fail sementara dan menggunakan kaedah uni.uploadFile untuk memuat naik fail ke pelayan. Atribut name mewakili nilai kunci yang sepadan dengan fail, iaitu nama parameter fail yang diterima pada pelayan.

Dengan cara ini, fungsi memilih gambar dan memuat naiknya dalam Uniapp direalisasikan.

2. Muat naik imej dan dapatkan hasil pulangan

Dalam proses memuat naik imej, kita perlu mendapatkan hasil yang dikembalikan oleh bahagian belakang selepas muat naik berjaya, supaya kita boleh mendapatkan muat naik Alamat URL imej atau maklumat muat naik imej lain.

Dalam antara muka uni.uploadFile, kami menambah parameter dalam fungsi panggil balik kejayaan untuk menerima hasil yang dikembalikan oleh bahagian belakang selepas muat naik berjaya. Kod yang diubah suai adalah seperti berikut:

methods: {
   success(res){
     const data = res.data;
     console.log(data);
     console.log("上传成功");
   },
   fail(err){
     console.log("上传失败");
   },
   upload(){
     uni.chooseImage({
       sizeType: ['compressed'],
       sourceType: ['album', 'camera'],
       success: (res) => {
         const tempFilePaths = res.tempFilePaths;
         uni.uploadFile({
           url: this.uploadUrl,
           filePath: tempFilePaths[0],
           name: 'file',
           success: (res) => {
            this.success(res);
           },
           fail: (err) => {
            this.fail(err);
           }
         });
       }
     });
   }
}

Dalam kod di atas, kami mencetak data yang dikembalikan oleh pelayan dalam success.

2. Pelaksanaan pemadaman gambar

Dalam aplikasi kami, kadangkala kami perlu memadamkan gambar yang dimuat naik, yang boleh menjimatkan ruang storan dan mencapai tujuan mengoptimumkan program Uniapp menyediakan banyak antara muka API untuk melaksanakan fungsi ini. Dua kaedah diberikan di bawah:

1. Gunakan kaedah uni.removeSavedFile untuk memadam gambar

Kaedah ini ialah gambar yang digunakan dalam aplikasi dimuat turun atau diambil oleh aplikasi sendiri , gunakan uni.removeSavedFile untuk memadam foto daripada direktori aplikasi atau memori.

Tentukan dahulu kaedah padam:

methods:{
  deleteImage(index) {
    const filePath = this.uploadList[index].filePath;
    uni.removeSavedFile({
      filePath: filePath,
      success(res) {
        console.log(res)
      },
      fail(err) {
        console.log(err)
      }
    });
  }
}

Gunakan kaedah padam dalam komponen:

<view v-for="(item,index) in uploadList" :key="index">
    <image :src="item.filePath" mode="aspectFit" style="width:50px;height:50px"></image>
    <view v-on:click="deleteImage(index)">删除</view>
</view>

Dalam kod ini, kami menggunakan v-for pada senarai arahan komponen untuk mendapatkan maklumat gambar yang akan dipadam secara bergilir, dan kaedah deleteImage digunakan untuk memadam fail yang sepadan.

2. Hantar permintaan pemadaman ke pelayan

Dalam aplikasi kami, jika anda menggunakan imej pada pelayan, anda boleh memadamkannya dengan menghantar permintaan pemadaman ke gambar pelayan . Perbezaan antara kaedah ini dan menggunakan kaedah uni.removeSavedFile ialah kita perlu menghantar permintaan kepada pelayan dan memadamkan imej di latar belakang.

Tentukan kaedah pemadaman:

methods:{
  deleteImage(index) {
    const url = 'your_delete_url';
    const fileID = this.uploadList[index].url;
    uni.request({
      url: url,
      method: 'DELETE',
      data:{
        fileID:fileID,
        key:'value'  // 可以添加其他参数
      },
      success: (res) => {
        console.log(res);
      },
      fail: (err) => {
        console.log(err);
      }
    });
  }
}

Dengan cara ini, kami menghantar permintaan pemadaman kepada pelayan Selepas bahagian belakang menerima permintaan ini, data yang sepadan dalam pelayan boleh dipadamkan. .

3. Ringkasan

Di atas ialah dua cara untuk melaksanakan fungsi muat naik dan memadam imej dalam Uniapp. Dalam aplikasi praktikal, kita boleh memilih mengikut keperluan sebenar untuk mencapai fungsi muat naik dan memadam imej yang sempurna dalam program. Pada masa yang sama, kami juga boleh menggunakan kaedah prestasi yang lebih baik semasa digunakan untuk mencapai prestasi program yang lebih baik.

Atas ialah kandungan terperinci Mari kita bincangkan tentang operasi muat naik dan pemadaman foto Uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!