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

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 속성은 해당 파일에 해당하는 키 값, 즉 서버에서 받은 파일의 파라미터 이름을 나타낸다.

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

rrreee

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