uview中上传图片组件的代码
详细请看uview官网,本次用的事件有两个
1、模板中的组件使用
<u-upload
ref="uUploadMultiple"
:file-list="uploadImgs"
accept="image"
:max-size="4 * 1024 * 1024"
@oversize="oversize"
:show-progress="false"
:auto-upload="false"
max-count="4"
width="180"
height="180"
@on-remove="deletePic"
@on-choose-complete="afterReadImgs"
>
</u-upload>
2、data中声明的数据
data () {
return {
uploadImgs: [],
activityForm: {
activityPicInfos: [],
},
header: {
//根据你接口需求自定义
Authentication: this.token,
},
uploadImgUrl,//图片上传地址
}
},
3、method中的代码逻辑
// 文件超出大小限制
oversize () {
uni.showToast({
title: '图片最大不能超过4M',
icon: 'none',
})
},
// 读取文件 多张图片上传
afterReadImgs (event) {
this.multipleUpload(this.$refs.uUploadMultiple.lists, 2)
},
// 多张图片上传
multipleUpload (event, type) {
let that = this
let num = 5
event.map(item => {
if (num === event.length) {
uni.showToast({
title: '最多上传4张图片',
icon: 'none',
})
return
}
num += 1
if (item.file) {
that.uploadDo(item, type)
}
})
},
// 执行上传
uploadDo (event, type) {
const that = this
uni.uploadFile({
// source 上传图片来源 0:用户上传头像:1:活动 2:攻略 3:酒店 4:景点(0、1、2时需要传token)
url: uploadImgUrl + '?source=1',
filePath: event.file.path,
header: {
Authentication: that.token,
},
name: 'file',
success (res) {
const { data } = JSON.parse(res.data)
that.activityForm.activityPicInfos.push({
picUrl: data.fileUrl,
isFirst: 0,
})
},
})
},