一、简介

uView组件的上传功能，单图上传、多图上传等。
官方文档地址：
https://www.uviewui.com/components/upload.html

二、步骤

（一）单图上传

1.效果演示：

只能上传一张，选完之后，上传的按钮消失，当然，如果图片不合适，删掉再换一张，但就是只能上传一张。

2.代码：

<template><view class="content"><!-- 上传图片 --><u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :multiple="false" :maxCount="1" width="112rpx" height="109rpx" :deletable="true" :previewImage="true"><!-- 这张图片就是自定义的图片，地址填写自己本地的就行 --><image src="/static/function/uploadImg.png" mode="widthFix" style="width: 112rpx;height: 110rpx;"></image></u-upload></view>
</template><script>export default {data() {return {// 上传图片fileList1: [],}},onLoad() {},methods: {//删除图片deletePic(e) {console.log(e);this[`fileList${e.name}`].splice(e.index, 1)},// 新增图片async afterRead(event) {console.log(event)// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式let lists = [].concat(event.file)let fileListLen = this[`fileList${event.name}`].lengthlists.map((item) => {this[`fileList${event.name}`].push({...item,status: 'uploading',message: '上传中'})})for (let i = 0; i < lists.length; i++) {const result = await this.uploadFilePromise(lists[i].url)let item = this[`fileList${event.name}`][fileListLen]this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {status: 'success',message: '',url: result}))fileListLen++}},//上传图片uploadFilePromise(url) {return new Promise((resolve, reject) => {let a = uni.uploadFile({//url: this.$common.domain+'/api/common/upload', // 仅为示例，非真实的接口地址url:'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址filePath: url,name: 'file',formData: {user: 'test'},success: (res) => {let data=JSON.parse(res.data) //最终传给的是字符串，这里需要转换格式resolve(data.data.url)}});})},}}
</script><style lang="scss">
</style>

（二）多图上传

1.效果演示：

可一次性选多张，我这里限制为两张，上传满两张则不会显示上传的logo。点击图片可预览。

2.代码：

<template><view class="content"><!-- 上传图片 --><u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :multiple="true" :maxCount="2" width="112rpx" height="109rpx" :deletable="true" :previewImage="true"><!-- 这张图片就是自定义的图片，地址填写自己本地的就行 --><image src="/static/function/uploadImg.png" mode="widthFix" style="width: 112rpx;height: 110rpx;"></image></u-upload></view>
</template><script>export default {data() {return {// 上传图片fileList1: [],}},onLoad() {},methods: {//删除图片deletePic(e) {console.log(e);this[`fileList${e.name}`].splice(e.index, 1)},// 新增图片async afterRead(event) {console.log(event)// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式let lists = [].concat(event.file)let fileListLen = this[`fileList${event.name}`].lengthlists.map((item) => {this[`fileList${event.name}`].push({...item,status: 'uploading',message: '上传中'})})for (let i = 0; i < lists.length; i++) {const result = await this.uploadFilePromise(lists[i].url)let item = this[`fileList${event.name}`][fileListLen]this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {status: 'success',message: '',url: result}))fileListLen++}},//上传图片uploadFilePromise(url) {return new Promise((resolve, reject) => {let a = uni.uploadFile({//url: this.$common.domain+'/api/common/upload', // 仅为示例，非真实的接口地址url:'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址filePath: url,name: 'file',formData: {user: 'test'},success: (res) => {setTimeout(() => {resolve(res.data.data)}, 1000)}});})},}}
</script><style lang="scss">
</style>

三、其余补充

如果一个页面上有多处上传，操作也不是很复杂，大家都是共用同一个方法。

整体搬过来用即可。

请求接口的地方需要用join处理一下

getData() {let images=[]this.fileList1.forEach((item)=>{images.push(item.url)})this.$common.request('post', '/Coupon/addCoupon', {image:images.join(','),}).then(res => {if (res.code == 1) {this.$common.success(res.msg)setTimeout(()=>{this.$common.back()},1200)}})
},

新上传代码：(多图处理)

<view class="imgBox"><u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" :multiple="true" :maxCount="9"><image :src="$common.image('/static/talentZone/addImg.png')" mode="aspectFill"  class="fileImg"></image></u-upload>
</view>

data() {return {// 图片列表fileList: []}
},
methods: {// 图片上传//删除图片deletePic(e) {console.log(e);this.fileList.splice(e.index, 1)},// 新增图片async afterRead(event) {// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式let lists = [].concat(event.file)let fileListLen = this.fileList.lengthlists.map((item) => {this.fileList.push({...item,status: 'uploading',message: '上传中'})})for (let i = 0; i < lists.length; i++) {const result = await this.uploadFilePromise(lists[i].url)console.log(result);if(result.success){let item = this.fileList[fileListLen]this.fileList.splice(fileListLen, 1, Object.assign(item, {status: 'success',message: '',url: result}))fileListLen++}else{this.fileList.splice(fileListLen, 1)}}},//上传图片uploadFilePromise(url) {return new Promise((resolve, reject) => {let a = uni.uploadFile({url:'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址,换成自己上传图片的接口filePath: url,name: 'file',success: (uploadRes) => {setTimeout(()=>{let res = JSON.parse(uploadRes.data) //最终传给的是字符串，这里需要转换格式if(res.code == 0){this.$common.msg(res.msg)resolve({success:false,url:''})return;}resolve({success:true,url:res.data.url})},2000)}});})},//点击确认还需要些许修改fabu() {let images = []this.fileList.forEach((item) => {images.push(item.url.url)})// 其他接口request('post', '其他接口地址', {title: this.textValue,info: this.textValue,images: images.join(',')//重点是这里，需要看后台接收的类型进行更改}).then(res => {if (res.code == 1) {console.log(res);}})},
}

图片上传

// 图片上传
//删除图片
deletePic(event) {this[`fileList${event.name}`].splice(event.index, 1)
},
// 新增图片
async afterRead(event) {// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式let lists = [].concat(event.file)let fileListLen = this[`fileList${event.name}`].lengthlists.map((item) => {this[`fileList${event.name}`].push({...item,status: 'uploading',message: '上传中'})})for (let i = 0; i < lists.length; i++) {const result = await this.uploadFilePromise(lists[i].url)console.log("结果", result);if (result.success) {let item = this.fileList[fileListLen]this.fileList.splice(fileListLen, 1, Object.assign(item, {status: 'success',message: '',url: result}))fileListLen++} else {this.fileList.splice(fileListLen, 1)}}
},
uploadFilePromise(url) {return new Promise((resolve, reject) => {let a = uni.uploadFile({url: config[config.env].apiUrl + '/api/common/upload', // 仅为示例，非真实的接口地址filePath: url,name: 'file',formData: {user: 'test'},success: (uploadRes) => {setTimeout(() => {let res = JSON.parse(uploadRes.data) //最终传给的是字符串，这里需要转换格式if (res.code == 0) {this.$common.msg(res.msg)resolve({success: false,url: ''})return;}console.log("图片", res);resolve({success: true,url: res.data.url})}, 1000)}});})
},

单图传值

data(){return{payment_credentials:''//支付凭证（线下必填）}
},
methods: {aaa(){if (this.fileList.length > 0) {this.payment_credentials = this.fileList[0].url.url}}}

图片回显

当内容进行修改时，需要先将上次上传过的图片进行显示（后台会返回图片数组），之后或许删除上次中的某种图片，也有可能会新上传一些图片。最后提交给后台的数据的图片数组是不带域名的。
整体步骤如下：

data() {return {// 图片列表fileList: [],//修改功能 需要提交的图片数组subImg:[]}
},

1.修改，根据id 进行查询此条数据的信息，后台返回该条数据信息，这里只说图片的事。首先对`images`进行处理，字符串转化为数组，之后对分割后的数组`subImg`进行遍历循环，把图片路径（拼接好域名之后）push到`fileList`数组里面，这时候页面的图片就能显示了。

this.subImg = res.data.images.split(',') //字符串转化为数组
this.subImg.forEach(item=>{console.log(item);this.fileList.push({url:  this.$common.image(item)//拼接好域名之后push进去})
})
console.log(this.fileList);

2.由于修改之后提交给后台的图片数组是不带域名的，所以自定义了一个`subImg`数组，刚上来的时候就已经赋进去了最初始的两张图，如果删除，就根据删除的下标删除掉此数组里面的图片，每次上传新图片的时候，就把新上传后返回的图片路径push进去，这样不管是删除还是新增都能保证sunImg数组里面的图片都是最新的，且不带域名

核心代码：

this.subImg.splice(e.index, 1)

this.subImg.push(res.data.url)

具体代码：

//删除图片
deletePic(e) {console.log(e);this.fileList.splice(e.index, 1)this.subImg.splice(e.index, 1)  //新增删除代码
},
// 新增图片
async afterRead(event) {// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式let lists = [].concat(event.file)let fileListLen = this.fileList.lengthlists.map((item) => {this.fileList.push({...item,status: 'uploading',message: '上传中'})})for (let i = 0; i < lists.length; i++) {const result = await this.uploadFilePromise(lists[i].url)console.log(result);if (result.success) {let item = this.fileList[fileListLen]this.fileList.splice(fileListLen, 1, Object.assign(item, {status: 'success',message: '',url: result}))fileListLen++} else {this.fileList.splice(fileListLen, 1)}}
},
//上传图片
uploadFilePromise(url) {return new Promise((resolve, reject) => {let a = uni.uploadFile({url: config[config.env].apiUrl + '/api/common/upload',filePath: url,name: 'file',success: (uploadRes) => {setTimeout(() => {let res = JSON.parse(uploadRes.data) //最终传给的是字符串，这里需要转换格式if (res.code == 0) {this.$common.msg(res.msg)resolve({success: false,url: ''})return;}console.log("图片", res.data.url);this.subImg.push(res.data.url)  //新增添加代码resolve({success: true,url: res.data.url})}, 2000)}});})
},

uniapp、uview——图片上传（单图上传、多图上传、多组照片上传、图片回显）相关推荐

微信多图上传，解决android多图上传失败问题
微信提供了文件上传的方法wx.uploadFile来上传我们的图片 wx.chooseImage({success: function(res) {var tempFilePaths = res.te ...
图纸上标注的是实际尺寸吗_CAD比例画图时,图上标的尺寸,是实际尺寸还是图上尺寸啊?...
图上标注当然要标实物实际尺寸,因为标好后打印出图时其数值是不会变的,不管是按什么比例画的,也不管是按什么图框比例打印出图的,其值标好后就不变了.你100mm的东西当然要标100(mm)啦.你可能是初学 ...
等压线上怎么画风向_等压线图上怎么画风向？
2016-03-21 何为"等压线"? 图上气压值相同的各个点的连线就是等压线.由于气压随高度而变化,须先把各地气压订正成海平面气压,以便比较.通常将某一时刻各个地方的海平面 ...
uniapp - 全平台兼容的 “多图上传“ 功能，搭配 uview 组件库中的 upload 上传组件（附带详细的示例源码及注释，可直接复制使用或简单修改）
效果图使用 uniapp 开发,多平台全端兼容的多图上传功能,支持限制个数及移除等. 组件库使用的是 uview 框架,上传组件基于 Upload组件,功能完美无bug. 准备阶段 Upload组件 ...
php 多图上传编辑器,laravel中使用WangEditor及多图上传
1. 创建项目及安装所需安装包 1.1 创建项目 composer create-project laravel/laravel=5.3 blog_wangeditor --prefer-dist 1 ...
php多图上传插件ios,yii2组件之多图上传插件FileInput的详细使用
作者:白狼出处:http://www.manks.top/yii2_multiply_images.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连 ...
antd upload手动上传_基于MVVCTP5的文件上传
现如今在市面上常见的web开发理念一般是两种,一种是MVC格式的,比较传统,而项目较大的开发,一般由团队完成,而MVC格式就显得有些不够合理 .于是 ,在这种情况下诞生了另外一种开发理念,我们叫MVV ...
android多文件上传错误,微信多图上传解决android多图上传失败问题
微信提供了文件上传的方法wx.uploadFile来上传我们的图片 wx.chooseImage({ success: function(res) { var tempFilePaths = res. ...
5.springMVC数据回显（就是后台向页面传参的过程）
视频教程地址:http://edu.51cto.com/sd/2cfc2 数据回显其实就是指后台像前台传参的一个过程,这里介绍几种常见的数据回显: 1.springMVC会自动回显的实体类 2.常见的 ...

uniapp、uview——图片上传（单图上传、多图上传、多组照片上传、图片回显）

一、简介

二、步骤

（一）单图上传

1.效果演示：

2.代码：

（二）多图上传

1.效果演示：

2.代码：

三、其余补充

新上传代码：(多图处理)

图片上传

单图传值

图片回显

uniapp、uview——图片上传（单图上传、多图上传、多组照片上传、图片回显）相关推荐

最新文章

热门文章