上传多张图片(对接过后端接口):
<uni-file-picker ref="filePicker" limit="9" :value="fileList.url" title="最多上传9张" :image-styles="imageStyles" :sourceType="sourceType" @select="select" @progress="progress" @success="success" @fail="fail" @delete="deletea" />// 图片回显fileList: [],// 上传图片的样式imageStyles: { width: 90, height: 90,},// uni.chooseImage值,从相册选择,拍摄sourceType: ['album', 'camera'],// 获取上传状态select(e) { // 获取本地存储中的认证令牌 const accessToken = uni.getStorageSync('accessToken'); console.log('选择文件:', e) // 解决file对象取值问题 // 微信小程序上传-需要微信临时提供临时地址 const tempFilePaths = e.tempFilePaths; // 处理每张选中的图片 tempFilePaths.forEach(tempFilePath => { uni.uploadFile({ url: apiBaseUrl + '/image/importPhoto', filePath: tempFilePath, // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容 name: 'fileList', header: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${accessToken}` }, // 成功函数 success: (res) => { console.log('上传成功', res.data); // uni.uploadFile返回来的结果默认是JSON格式字符串,需要用JSON.parse转换成js对象 console.log('上传数据转换', JSON.parse(res.data)); let uploaddata = JSON.parse(res.data) let x = {} // 下面3个值是uni-app规定的一个不能少 x.url = uploaddata.message x.extname = '' x.name = '' this.fileList.push(x) }, // 失败提示用户重新上传 fail: error => { console.log('失败', error); } }) }); }, // 获取上传进度 progress(e) { // 没有上传空间,不会执行 console.log('上传进度:', e) }, // 上传成功 success(e) { // 没有上传空间,不会执行 console.log('上传成功') }, // 上传失败 fail(e) { // 没有上传空间,不会执行 console.log('上传失败:', e) }, // 删除 deletea(e) { console.log('删除图片', e); },//在需要清空上传过的照片函数里调用this.$refs.filePicker.clearFiles();
上传一张图片(未对接后端接口):
主要修改位置如下:
<uni-file-picker ref="filePicker" limit="1" :value="fileList.url" title="上传1张" :image-styles="imageStyles" :sourceType="sourceType" @select="select" @progress="progress" @success="success" @fail="fail" @delete="deletea" />activeColor: '#5098FF',sourceType: ['album', 'camera'],// uni.chooseImage值,从相册选择,拍摄// 获取上传状态select(e) { // 获取本地存储中的认证令牌 const accessToken = uni.getStorageSync('accessToken'); console.log('选择文件:', e) // 解决file对象取值问题 // 微信小程序上传-需要微信临时提供临时地址 const tempFilePath = e.tempFilePaths[0]; // 获取第一张选中的图片 uni.uploadFile({ url: apiBaseUrl + '/image/importPhoto', filePath: tempFilePath, // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容 name: 'fileList', header: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${accessToken}` }, // 成功函数 success: (res) => { console.log('上传成功', res.data); // uni.uploadFile返回来的结果默认是JSON格式字符串,需要用JSON.parse转换成js对象 console.log('上传数据转换', JSON.parse(res.data)); let uploaddata = JSON.parse(res.data) let x = {} // 下面3个值是uni-app规定的一个不能少 x.url = uploaddata.message x.extname = '' x.name = '' this.fileList = [x]; // 仅保留一张上传的图片 }, // 失败提示用户重新上传 fail: error => { console.log('失败', error); } }); }, // 获取上传进度 progress(e) { // 没有上传空间,不会执行 console.log('上传进度:', e) }, // 上传成功 success(e) { // 没有上传空间,不会执行 console.log('上传成功') }, // 上传失败 fail(e) { // 没有上传空间,不会执行 console.log('上传失败:', e) }, // 删除 deletea(e) { console.log('删除图片', e); },