uniapp 上传图片＋预览图片 + 删除图片

图片是用的阿里巴巴矢量图。

<template>
// html部分<view class="goods-box"><view class="imgList" v-for="(item, key) in fileList" :key="key"><image class="del" src="/static/image/delete.png" @click="delImage(key)"></image><image class="imgList" :src="item" @click="previewImg(fileList,key)"></image></view>// 这个v-if可以自己适度看自己情况增加或减少<image class="imgList" src="/static/image/upload.png" @click="addImage" v-if="fileList.length < 6"></image></view>
</template>

// js部分
<script>
export default {data() {return {fileList: [], // 存储图片的数组，urlStr: "" //  后端返回的图片数据拼接}},methods: {// 预览图片功能previewImg(urls, i) {// console.log(urls);uni.previewImage({urls, //所有要预览的图片的地址集合 必须数组形式 current: urls[i] //当前图片地址,点击预览哪个预览的哪个传的 i 是索引})},// 新增图片 addImage() {const max = 6;const count = max - this.fileList.lengthuni.chooseImage({count: count,  // 上传图片最多6个可以自己调success: (res) => {this.fileList = [...this.fileList, ...res.tempFilePaths]}})},// 删除图片delImage(id) {this.fileList.splice(id, 1)},//  如果需要上传后台 仅供参考async upload() {for (let i = 0; i < this.fileList.length; i++) {let item = this.fileList[i];await this.requestMessage(item);}然后这点上传  接口 传给后端 处理后图片的值上传接口（）}// 处理图片 如果需要上传后台 仅供参考requestMessage(item) {return new Promise((resolve, reject) => {uni.uploadFile({url: "你们后端接口",filePath: item,name: 'file',success: (res) => {let data = JSON.parse(res.data)// console.log(data);this.urlStr = this.urlStr += data.data.fullurl + ','// 后端要求上传图片  https://图片 ， https:// 图片，https: // 图片 resolve(); // 返回处理后数据}})})},}
}
</script><style lang="scss">
.goods-box {display: flex;flex-wrap: wrap;// 图片列表.imgList {position: relative;width: 180rpx;height: 180rpx;margin: 0 50rpx 30rpx 0;}// 删除图片.del {position: absolute;width: 60rpx;height: 60rpx;right: 15rpx;z-index: 999;}}
</style>

uniapp 上传图片＋预览图片 + 删除图片相关推荐

【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片，并且以九宫格展示图片
大家好,我叫小秃僧这篇文章是讲解云开发如何上传.下载.预览.删除图片,并且以九宫格展示图片的功能学习目录 1. 实现效果 2.JavaScript代码 3.wxml代码 4.wxss代码 1. 实 ...
利用微信的weui框架上传、预览和删除图片
jQuery WeUI 是专为微信公众账号开发而设计的一个框架,jQuery WeUI的官网:http://jqweui.com/ 需求:需要在微信公众号网页添加上传图片功能技术选型:实现上传图片功 ...
uni-app上传图片(选择，预览，删除图片)
用uni-app做项目时,上传图片的功能需求应该是在正常不过的了.最近有几个项目都有遇到,所以想总结一下.所用到的api都很简单. 功能需求功能需求如列表所示,视图展现如图所示,代码如下.点击相框按 ...
uniapp上传、预览、删除图片
效果图如下: 代码如下所示: <template><view class="upload-img"><image src="/static/ ...
使用GridView实现仿微信发朋友圈添加图片，点击预览、删除图片
最近在项目中有一个用户反馈的功能中要上传图片,和微信发朋友圈添加图片的功能其实有点类似,所以我想着用GridView来实现这个功能,整个过程也很简单,画不多说,详细步骤见下: 1.先来看MainAct ...
anguarjs 上传图片预览_前端图片上传那些事儿
本文转自:掘金作者:chess 前言本文讲的图片上传,主要是针对上传头像的.大家都知道,上传头像一般都会分成以下 4 个步骤: 选择图片 -> 预览图片 -> 裁剪图片 -> 上 ...
微信开发php插件下载图片,微信开发之微信jsapi选择图片,上传图片,预览和下载图片方法...
参数描述 appId公众号的唯一标识应用id timestamp生成签名的时间戳 nonceStr生成签名的随机串 signature签名上述表格中的四个参数是初始化调用微信jsapi的凭证,咱们 ...
jQuery图片批量上传插件源码，支持批量上传、预览、删除、放大，可配置上传数量、上传大小、追加方式，含详细使用文档
jQuery图片批量上传插件源码,支持批量上传.预览.删除.放大,可配置上传数量.上传大小.追加方式,含详细使用文档程序包内含使用Demo 完整程序源代码:jQuery图片批量上传插件源码上传前 ...
java 根据预览图片上传_JavaSctit 利用FileReader和滤镜上传图片预览功能
filereader 对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 file或 blob对象指定要读取的文件或数据. 1.filereader接口的方法 fi ...
MUI 图片上传、预览、删除重选等等实现
MUI 图片上传.预览.删除重选等等实现本地项目路径: C:\Users\Administrator\Desktop\超实用的javascript代码\10.5 - MUI 轮播\login\set ...

uniapp 上传图片＋预览图片 + 删除图片

uniapp 上传图片＋预览图片 + 删除图片相关推荐

最新文章

热门文章

uniapp 上传图片 ＋ 预览图片 + 删除图片

uniapp 上传图片 ＋ 预览图片 + 删除图片相关推荐

最新文章

热门文章

uniapp 上传图片＋预览图片 + 删除图片

uniapp 上传图片＋预览图片 + 删除图片相关推荐