<template>
<u-upload
ref="uUpload"
:file-list="fileList"
accept="image/jpeg,image/png" //允许选择图片文件
:sizeType="sizeType"
:max-size="2 * 1024 * 1024" //限制上传的图片文件最大为 2M
@oversize="oversize"
@on-remove="deleteImgs" //移除
:auto-upload="false" //禁止自动上传选择的图片文
max-count="9" //限制最多只能选择几个图片文件
:show-progress="false" //不显示文件上传进度条
multiple //多图
:previewFullImage="true" //预览图片时显示完整的原图
@on-choose-complete="onChooseComplete">
</u-upload>
</template>
<script>
export default {
data() {
return {
fileList: [], //文件列表
}
},
methods: {
// 文件超出大小限制
oversize() {
uni.showToast({
title: "图片最大不能超过2M",
icon: 'none'
})
},
onChooseComplete(event) {
this.multipleUpload(this.$refs.uUpload.lists, 2)
},
// 多张图片上传
multipleUpload(event, type) {
let num = 9;
event.map(item => {
if (num === event.length) {
uni.showToast({
title: '最多上传9张图片',
icon: 'none'
})
return
}
num += 1
this.uploadDo(item, type)
})
},
uploadDo(event, type) {
uni.uploadFile({
url: "http://192.168.2.105:18100/file/uploadFile",//仅为示例,非真实的接口地址
filePath: event.file.path,
name: "file",
header: {
Authorization: `Bearer +uni.getStorageSync("token")`,
},
success: (res) => {
let resp = JSON.parse(res.data);
this.form.voucherPictureUrls.push(resp.data);
},
});
},
//删除图片
deleteImgs(index, lists, name) {
},
}
</script>
uploadDo(event, type) {
console.log(event, "event"); //上传图片事件
uni.uploadFile({
url: "http://192.168.2.105:18100/file/uploadFile",//仅为示例,非真实的接口地址
filePath: event.file.path,
name: "file",
header: {
Authorization: `Bearer +uni.getStorageSync("token")`, //要添加header否则接口不能调用
},
success: (res) => {console.log(res, "res");
//如果上传成功打印下res,看有没有调用接口以及图片上传回显
let resp = JSON.parse(res.data);
this.form.voucherPictureUrls.push(resp.data);
},
});
},