该组件用于上传图片场景
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
| √ | √ | √ | √ |
#基础用法
- 可以通过设置
fileList参数(数组，元素为对象)，显示预置的图片。其中元素的url属性为图片路径
<template> <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10" ></u-upload> </template> <script> export default { data() { return { fileList1: [], } }, methods:{ // 删除图片 deletePic(event) { this[`fileList${event.name}`].splice(event.index, 1) }, // 新增图片 async afterRead(event) { // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式 let lists = [].concat(event.file) let fileListLen = this[`fileList${event.name}`].length lists.map((item) => { this[`fileList${event.name}`].push({ ...item, status: 'uploading', message: '上传中' }) }) for (let i = 0; i < lists.length; i++) { const result = await this.uploadFilePromise(lists[i].url) let item = this[`fileList${event.name}`][fileListLen] this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, { status: 'success', message: '', url: result })) fileListLen++ } }, uploadFilePromise(url) { return new Promise((resolve, reject) => { let a = uni.uploadFile({ url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址 filePath: url, name: 'file', formData: { user: 'test' }, success: (res) => { setTimeout(() => { resolve(res.data.data) }, 1000) } }); }) }, } } </script>
copy
#上传视频
- 通过设置
accept='video'属性，将上传改为视频上传。
<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple :maxCount="10" accept="video" ></u-upload> <!-- data 方法请参考 基本用法 --> data(){ return{ fileList2: [], } }
copy
#文件预览
- 通过设置
:previewFullImage="true"'属性，达到文件预览的目的。
<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple :maxCount="10" :previewFullImage="true" ></u-upload> <!-- data 方法请参考 基本用法 --> data(){ return{ fileList3: [{ url: 'https://cdn.uviewui.com/uview/swiper/1.jpg', }], } }
copy
#隐藏上传按钮
- 上传数量等于
maxCount所规定的数据时，隐藏上传按钮。
<u-upload :fileList="fileList4" @afterRead="afterRead" @delete="deletePic" name="4" multiple :maxCount="2" ></u-upload> <!-- data 方法请参考 基本用法 --> data(){ return{ fileList4: [{ url: 'https://cdn.uviewui.com/uview/swiper/1.jpg', }, { url: 'https://cdn.uviewui.com/uview/swiper/1.jpg', } ], } }
copy
#限制上传数量
- 同上，规定
maxCount的数据时。
<u-upload :fileList="fileList5" @afterRead="afterRead" @delete="deletePic" name="5" multiple :maxCount="3" ></u-upload> <!-- data 方法请参考 基本用法 --> data(){ return{ fileList5: [], } }
copy
#自定义上传样式
- 添加
image以自定义上传样式，达到身份证，银行卡等不同场景需求。
<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple :maxCount="1" width="250" height="150" > <image src="https://cdn.uviewui.com/uview/demo/upload/positive.png" mode="widthFix" style="width: 250px;height: 150px;"></image> </u-upload> <!-- data 方法请参考 基本用法 --> data(){ return{ fileList6: [], } }
