使用uniapp和uview上传图片，预览和删除都可以

最新推荐文章于 2025-10-13 09:39:07 发布

原创

最新推荐文章于 2025-10-13 09:39:07 发布 · 1w 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了一个使用uniapp和uview实现的图片上传功能优化案例。通过改进代码，提升了用户体验，包括图片预览、选择及删除等功能。文章还详细展示了如何通过插件市场获取并定制上传组件。

之前写过一个使用uniapp和uview上传图片功能，项目测试时用的那个，是可以上传成功的，但是有点问题，代码优化后把现在的贴出来，感觉比之前那个好用（中配）

优化PLUS版：可以从我的资源处下载依赖免费的，文件中引入，预览方法改为，别的不用改（使用下面的上传组件）

previewImage(logourl) {
       const ctpic = new Ctpic();
       let that = this;
       let res = ctpic.app_URLtoBitmap({
       base64:logourl //base64数据
       })
}

上传组件，是在插件市场下载的，根据自己需求改了改
<template>
  <view class="imglistbx">
    <view :class="['imglistItem',columnNum==3?'column3':'column4']" v-for="(item,index) in showList" :key='index'>
      <!--该处图片路径指向的是base64图片流-->
      <image :src="item.messageContent" class="itemImg" @click="previewImage(item.messageContent)" mode="aspectFill"></image>
      <icon size="18" type="cancel" class="cancelBtn"