聊聊Uniapp的照片上传和删除操作

百变鹏仔 4周前 (11-20) #uniapp

文章标签上传

近年来，在移动应用开发领域，uniapp已经成为越来越多开发者的首选。uniapp是一款全新的开发框架，通过这一框架，开发者可以开发多端应用，从而提高了工程师的开发效率。本文将对uniapp的照片上传和删除操作进行详细的介绍和讲解。

一、图片上传的实现

相机和图片选取是常见的功能之一，Uniapp提供了丰富的API接口，使得相机、相册或是微信朋友圈、在线文件等多种方式进行图片的选择和上传成为可能。下面我们将详细介绍Uniapp的API接口如何实现图片上传的功能。

选择图片并上传

Uniapp提供了一个非常好用的组件，uni-upload，可以实现异步上传文件，接下来通过uni-upload实现选择图片上传的功能。

首先在前端页面上添加如下代码：

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

这段代码中，我们定义了一个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中选择图片并上传的功能。

上传图片并获取返回结果

在上传图片的过程中，我们需要在上传成功后获取到后端返回的结果，这样可以获取到上传图片的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接口来实现这个功能。下面给出两种方式：

使用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方法则是用来删除相应的文件。

向服务器发起删除请求

在我们的应用中，如果使用的是服务器上的图片，那么可以使用向服务器发送删除请求的方式来删除图片。这种方式与使用uni.removeSavedFile方法不同的是，我们需要向服务器发送请求，并将该图片在后台删除。

定义删除方法：

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

通过这种方式，我们向服务器发送了一条删除请求，后端接收到这条请求后，就可以删除服务器中的相应数据。

三、总结

文章推荐

聊聊Uniapp的照片上传和删除操作

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项