uView1.0的Upload组件上传图片
<template><u-uploadref="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 += 1this.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);
},
});
},