使用uniapp的uni-ui组件 <uni-file-picker>图片上传 在编辑时图片数据怎么回显

文章讲述了在使用uni-ui组件进行图片上传时,由于需要提供url才能显示图片,因此对服务器返回的字符串格式的imageUrl进行处理,通过split和map方法将其转换为包含url属性的新数组。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<uni-section title="请上传肥料图片" type="line" padding >
	<uni-file-picker :limit="3" fileMediatype="image" multiple @select="uploadImage"      
     v-model="commodity.imageUrl" :value="commodity.imageUrl"></uni-file-picker>
</uni-section>
使用uni-ui组件图片上传必须要有这个--- url ---否则图片不会显示 

所以进行了map来遍历转换成带有url属性的新数组

getdetail(id).then(res => {
		if (res.code === 200) {
//这里因为图片格式是字符串,所以用split分割成数组,如果不是字符串请忽略
		    const urls = res.data.imageUrl.split(',');
            const fileLists = urls.map(url => ({
						url: url.trim()
					}));
					commodity.imageUrl = fileLists
				}
			})

### 实现 UniApp 中 `uni-file-picker` 组件上传文件的实进度条 为了在使用 `uni-file-picker` 上传文件过程中示进度条,可以利用 `uni.uploadFile` API 的调函数来获取并更新上传进度。具体方法如下: #### 使用 `onProgressUpdate` 方法监听上传进度 通过 `uni.uploadFile` 提供的 `onProgressUpdate` 参数,可以在每次上传进度发生变化触发相应的事件处理程序。 ```javascript // 定义上传文件的方法 function uploadFile(filePath) { const task = uni.uploadFile({ url: 'https://example.com/upload', // 替换成实际服务器地址 filePath, name: 'file', formData: { user: 'test' }, success(uploadRes) { console.log('Upload Success:', JSON.parse(uploadRes.data)); } }); // 添加进度变化监听器 task.onProgressUpdate((res) => { let percent = res.progress; updateProgressBar(percent); // 更新页面上的进度条UI逻辑 console.log(`Upload Progress ${percent}%`); }); } ``` 此代码片段展示了如何创建一个用于上传单个文件的任务,并注册了一个当上传过程中的任何进展发生改变都会被调用的调函数[^1]。 #### 将进度同步到视图层 为了让用户看到正在发生的上传活动,在前端界面中添加一个表示当前上传状态的小部件是非常重要的。这可以通过 Vue.js 数据绑定机制轻松完成。 假设有一个名为 `progressPercent` 的变量用来存储最新的百分比数值,则可以在模板部分这样写入 HTML 结构: ```html <template> <!-- ... --> <view class="upload-progress"> <text>Uploading...</text> <progress :percentage="progressPercent"></progress> </view> </template> <script> export default { data() { return { progressPercent: 0, // 初始化为零 }; }, methods: { updateProgressBar(value){ this.progressPercent = value; } // 其他业务逻辑... } }; </script> ``` 这段代码定义了一个简单的 UI 来反映上传的状态,其中包含了文本提示以及由框架内置组件 `<progress>` 构建而成的实际进度指示器[^2]。 #### 关联 `uni-file-picker` 和自定义上传行为 最后一步是要确保每当选择了新文件之后就会启动上述提到过的上传流程。为此,需监听来自 `uni-file-picker` 发出的选择成功 (`@select`) 或者确认提交 (`@confirm`) 事件,并在此处发起新的上传请求。 ```html <!-- 在 template 部分加入 --> <uni-file-picker v-model="selectedFiles" @select="handleSelect"/> ``` ```javascript methods:{ handleSelect(event){ event.tempFiles.forEach(file=>{ uploadFile(file.path); }) } } ``` 这里实现了每选中一次文件即刻执行对应的上传操作,并且会自动跟踪其传输情况直至结束[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值