<template> <view> <view style="display: flex;"> <view class="form-left"> 照片 </view> <view style="margin-left: 6px;"> <view style="display: flex;"> <view v-for="(pic,index) in fileList" :key="index"> <image :src="pic.uri" @click="imgPreview(pic)" class="upLoadImg"></image> </view> <image v-if="fileList.length < 3" src="../../static/images/bglogo.png" style="width: 36px;height: 36px;margin: 13px 16px;" @click="selectPics"> </image> </view> </view> </view> <view style="padding: 20rpx; display: flex;justify-content: space-around;"> <view class="submit-button" @click="submit()"> 提交 </view> <view class="cancel-button" @click="cancel"> 取消 </view> </view> </view> </template> <script> export default { data() { return { show: false, formData: { description: '' }, fileList: [], srcs: [], execId: 0, taskId: '', hasDescription: false, fileUri:'', imageStyles:{ width:64, height:64, border:{ color:"#888888", width:2, style:'dashed', radius:'2px' } }, } }, onLoad(e) { var that = this that.execId = e.execId; that.taskId = e.taskId; }, methods: { selectPics(){ var that = this; uni.chooseImage({ count: 3, success: (res) => { const files = res.tempFiles; let imgArr = []; for (let i = 0; i < files.length; i++) { let obj = new Object(); obj.name = 'photo'+i; obj.uri = files[i].path; this.fileUri = files[i].path; that.fileList.push(obj); } if(this.fileList.length > 0){ uni.uploadFile({ url: url+'/api/blade-resource/oss/endpoint/put-file-attach', (主要是这个url是你的后端映射处理得的地址,后面加上接口) filePath: this.fileUri, header:{ 'Blade-Auth': 'bearer' + ' ' + uni.getStorageSync('token').content }, name: 'file', fileType: "image", success: (res) => { var str = JSON.parse(res.data); // console.log(str.data.link); uni.showToast({ title: '上传成功' }); }, fail(res){ console.log(res) uni.showToast({ title: '上传失败' }); } }) } } }) }, close() { this.show = false }, cancel(){ this.formData.description = ''; this.fileList = []; this.show = false }, // 图片预览 imgPreview(img){ if(img.src == null || img.src == '' || img.src == undefined){ this.srcs.push(img.uri) }else{ this.srcs.push(img.src) } uni.previewImage({ indicator:"number", loop:true, urls: this.srcs }) this.srcs = [] }, } } </script> <style> .form-left{ margin-left: 16px; padding:18px 0; } .form-right{ margin-top: 6px; margin-left: 6px; padding:18px 0; width: 90%; border: 1px solid #D8D8D8; border-radius: 3px; } .submit-button{ background-color: #3c9cff; width: 106px; height: 36px; border-radius: 16px; text-align: center; line-height: 36px; } .cancel-button{ background-color: #D8D8D8; width: 106px; height: 36px; border-radius: 16px; text-align: center; line-height: 36px; } .upLoadImg{ width: 96rpx; height: 96rpx; background-color: #FFFFFF; margin-top: 16rpx; margin-left: 6px; } </style>标签:undefined,img,uploadFile,res,height,width,未定义,uni From: https://www.cnblogs.com/easyjie/p/16640291.html