Uniapp의 사진 업로드 및 삭제 작업에 대해 이야기하겠습니다.

최근 몇 년 동안 Uniapp은 모바일 애플리케이션 개발 분야에서 점점 더 많은 개발자가 가장 먼저 선택하는 곳이 되었습니다. Uniapp은 개발자가 다중 터미널 애플리케이션을 개발할 수 있는 새로운 개발 프레임워크로, 엔지니어의 개발 효율성을 향상시킵니다. 이번 글에서는 유니앱의 사진 업로드 및 삭제 작업에 대한 자세한 소개와 설명을 제공하겠습니다.

1. 사진 업로드 구현

카메라와 사진 선택은 일반적인 기능 중 하나입니다. Uniapp은 카메라, 사진 앨범, WeChat Moments, 온라인 파일 등을 통해 사진을 선택하고 선택할 수 있는 풍부한 API 인터페이스를 제공합니다. 가능한. 아래에서는 Uniapp의 API 인터페이스가 이미지 업로드 기능을 구현하는 방법을 자세히 소개합니다.

1. 사진 선택 및 업로드

Uniapp은 파일을 비동기적으로 업로드할 수 있는 매우 사용하기 쉬운 구성 요소인 uni-upload를 제공합니다. 다음으로 업로드할 사진을 선택하는 기능은 uni-upload를 통해 구현됩니다.

먼저 프런트 엔드 페이지에 다음 코드를 추가합니다.

<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>

이 코드에서는 upload-url 속성이 다음과 같은 uni-upload 구성 요소를 정의합니다. 이미지 업로드 URL 주소인 on-success 및 on-fail은 각각 업로드 성공 및 실패에 대한 콜백 함수에 해당합니다. @click 속성은 클릭 후 업로드 기능을 트리거합니다. uni-upload组件，其中upload-url属性是图片上传的URL地址，on-success和on-fail分别对应上传成功和失败的回调函数。@click属性是点击后触发上传函数。

然后我们需要在Vue实例中配置success和fail两个回调函数：

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)
           }
         });
       }
     });
   }
}

这段代码中，我们首先定义了success和fail两个回调函数，当上传成功或者失败后，就会执行相应的回调函数。在upload函数中，我们使用uni.chooseImage方法选择图片，获取到临时文件路径，并使用uni.uploadFile方法将文件上传到服务器。name属性表示文件对应的键值，即服务器上接收文件的参数名。

这样就实现了在Uniapp中选择图片并上传的功能。

2. 上传图片并获取返回结果

在上传图片的过程中，我们需要在上传成功后获取到后端返回的结果，这样可以获取到上传图片的URL地址或者其他图片上传的信息。

在uni.uploadFile这个接口中，我们在success回调函数中增加一个参数，用来接收上传成功后后端返回的结果。修改后的代码如下：

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);
           }
         });
       }
     });
   }
}

上面的代码中我们在success中打印了服务器返回的数据。

二、图片删除的实现

在我们的应用程序中，有时候需要删除已经上传的图片，这样可以节省存储空间并达到优化程序的目的，Uniapp提供了很多API接口来实现这个功能。下面给出两种方式：

1. 使用uni.removeSavedFile方法删除图片

这种方式是在应用中使用的图片是由应用自己下载或拍摄的，使用uni.removeSavedFile可以将照片从应用目录或内存中删除。

首先定义删除方法：

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

在组件中使用删除方法：

<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>

这段代码中，我们在列表组件上使用v-for指令，依次获取要删除的图片的信息，deleteImage

그런 다음 Vue 인스턴스에서 두 개의 콜백 함수 success 및 fail을 구성해야 합니다.

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);
      }
    });
  }
}

2. 이 코드에서는 먼저 success를 정의합니다. 콜백 함수는 code>와 fail 두 가지가 있습니다. 업로드가 성공하거나 실패하면 해당 콜백 함수가 실행됩니다. upload 함수에서는 uni.chooseImage 메소드를 사용하여 이미지를 선택하고 임시 파일 경로를 얻은 다음 uni.uploadFile 메소드를 사용하여 파일을 서버에 업로드합니다. name 속성은 해당 파일에 해당하는 키 값, 즉 서버에서 받은 파일의 파라미터 이름을 나타낸다.

이렇게 하면 사진을 선택해서 유니앱에 업로드하는 기능이 구현됩니다.

이미지 업로드 및 반환 결과 가져오기

이미지 업로드 과정에서 업로드가 성공한 후 백엔드에서 반환된 결과를 가져와야 업로드된 이미지의 URL 주소 또는 기타 정보를 얻을 수 있습니다. 이미지 업로드 정보입니다.

uni.uploadFile 인터페이스에서는 업로드가 성공한 후 백엔드에서 반환된 결과를 수신하기 위해 성공 콜백 함수에 매개변수를 추가합니다. 수정된 코드는 다음과 같습니다.

rrreee

위 코드에서는 성공으로 서버에서 반환한 데이터를 인쇄합니다. 🎜🎜2. 사진 삭제 구현🎜🎜우리 애플리케이션에서는 때때로 업로드된 사진을 삭제해야 하는데, 이는 저장 공간을 절약하고 프로그램 최적화 목적을 달성하기 위해 이 기능을 실현하기 위해 많은 API 인터페이스를 제공합니다. 아래에는 두 가지 방법이 있습니다. 🎜🎜🎜사진을 삭제하려면 uni.removeSavedFile 메서드를 사용하세요.🎜🎜🎜이 방법은 앱에서 사용된 사진을 앱 자체에서 다운로드하거나 촬영하는 것입니다. 응용 프로그램 디렉터리 또는 메모리에서 삭제합니다. 🎜🎜먼저 삭제 메소드를 정의합니다: 🎜rrreee🎜컴포넌트에서 삭제 메소드 사용: 🎜rrreee🎜이 코드에서는 목록 컴포넌트에 v-for 명령어를 사용하여 삭제할 이미지의 정보를 차례로 가져옵니다. deleteImage 메소드는 해당 파일을 삭제하는 데 사용됩니다. 🎜🎜🎜서버에 삭제 요청 보내기🎜🎜🎜저희 애플리케이션에서는 서버의 이미지를 사용하는 경우 서버에 삭제 요청을 보내 이미지를 삭제할 수 있습니다. 이 방법과 uni.removeSavedFile 방법의 차이점은 서버에 요청을 보내고 백그라운드에서 이미지를 삭제해야 한다는 것입니다. 🎜🎜삭제 방법 정의: 🎜rrreee🎜이렇게 하면 백엔드가 이 요청을 받은 후 서버에 있는 해당 데이터를 삭제할 수 있습니다. 🎜🎜3. 요약🎜🎜위는 유니앱에서 이미지 업로드와 삭제 기능을 구현하는 두 가지 방법입니다. 실제 응용 프로그램에서는 프로그램에서 완벽한 이미지 업로드 및 삭제 기능을 달성하기 위해 실제 필요에 따라 선택할 수 있습니다. 동시에 더 나은 프로그램 성능을 달성하기 위해 사용 중에 더 나은 성능 방법을 채택할 수도 있습니다. 🎜

위 내용은 Uniapp의 사진 업로드 및 삭제 작업에 대해 이야기하겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!