# Upload 上传 
该组件用于上传图片场景
# 平台差异说明
App(vue) | App(nvue) | H5 | 小程序 |
---|---|---|---|
√ | √ | √ | √ |
# 基础用法
- 可以通过设置
fileList
参数(数组,元素为对象),显示预置的图片。其中元素的url
属性为图片路径
<template>
<up-upload
:fileList="fileList1"
@afterRead="afterRead"
@delete="deletePic"
name="1"
multiple
:maxCount="10"
></up-upload>
</template>
<script setup>
import { ref } from 'vue';
const fileList1 = ref([]);
// 删除图片
const deletePic = (event) => {
fileList1.value.splice(event.index, 1);
};
// 新增图片
const afterRead = async (event) => {
// 当设置 mutiple 为 true 时, file 为数组格式,否则为对象格式
let lists = [].concat(event.file);
let fileListLen = fileList1.value.length;
lists.map((item) => {
fileList1.value.push({
...item,
status: 'uploading',
message: '上传中',
});
});
for (let i = 0; i < lists.length; i++) {
const result = await uploadFilePromise(lists[i].url);
let item = fileList1.value[fileListLen];
fileList1.value.splice(fileListLen, 1, {
...item,
status: 'success',
message: '',
url: result,
});
fileListLen++;
}
};
const 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>
# 上传视频
- 通过设置
accept='video'
属性,将上传改为视频上传。
<up-upload
:fileList="fileList2"
@afterRead="afterRead"
@delete="deletePic"
name="2"
multiple
:maxCount="10"
accept="video"
></up-upload>
<!-- data 方法请参考 基本用法 -->
data(){
return{
fileList2: [],
}
}
# 文件预览
- 通过设置
:previewFullImage="true"'
属性,达到文件预览的目的。
<up-upload
:fileList="fileList3"
@afterRead="afterRead"
@delete="deletePic"
name="3"
multiple
:maxCount="10"
:previewFullImage="true"
></up-upload>
<!-- data 方法请参考 基本用法 -->
data(){
return{
fileList3: [{
url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
}],
}
}
# 隐藏上传按钮
- 上传数量等于
maxCount
所规定的数据时,隐藏上传按钮。
<up-upload
:fileList="fileList4"
@afterRead="afterRead"
@delete="deletePic"
name="4"
multiple
:maxCount="2"
></up-upload>
<!-- data 方法请参考 基本用法 -->
data(){
return{
fileList4: [{
url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
},
{
url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
}
],
}
}
# 限制上传数量
- 同上,规定
maxCount
的数据时。
<up-upload
:fileList="fileList5"
@afterRead="afterRead"
@delete="deletePic"
name="5"
multiple
:maxCount="3"
></up-upload>
<!-- data 方法请参考 基本用法 -->
data(){
return{
fileList5: [],
}
}
# 自定义上传样式
- 添加
image
以自定义上传样式,达到身份证,银行卡等不同场景需求。
<up-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>
</up-upload>
<!-- data 方法请参考 基本用法 -->
data(){
return{
fileList6: [],
}
}
# 自动上传模式
- 自动上传可以大幅减少代码量,通过配置自动上传达到只写template很少的代码即可完成上传功能。
# 示例
<up-upload
width="56px"
height="56px"
v-model:fileList="fileList"
autoDelete
autoUpload
autoUploadApi="https://test.com/api/v1/local/upload"
autoUploadDriver="oss"
autoUploadAuthUrl="https://test.com/api/v1/oss/getSign"
:autoUploadHeader="{
'Authorization': '123456'
}"
getVideoThumb
name="1"
multiple
:maxCount="8"
:previewFullImage="true"
accept="video"
>
<template #trigger>
<view class="w-56px h-56px border border-solid border-#E3E3E3 flex justify-center items-center">
<up-icon name="plus" color="#E3E3E3" size="33px"></up-icon>
</view>
</template>
</up-upload>
<!-- data 方法请参考 基本用法 -->
data(){
return{
fileList: [],
}
}
# 注意OSS模式需要后端配合提供一个接口(OSS简单上传)参考如下代码。
// 获取文件名
$options['filename'] = input('get.filename');
$id = $this->settings['accessKeyId']; // 请填写您的AccessKeyId。
$key = $this->settings['accessKeySecret']; // 请填写您的AccessKeySecret。
$bucketName = 'test-oss'; // 存储同名称
$regionId = 'cn-hangzhou'; // 请填写您的Endpoint,以华东1(杭州)为例,填写为cn-hangzhou.aliyuncs.com。
// $host的格式为 bucketname.endpoint,请替换为您的真实信息。
$host = 'https://' . $bucketName . '.' .'oss-' . $regionId . '.aliyuncs.com';
$dir = date('Y-m-d'). '/'; // 上传文件时指定的目录
$now = time();
$end = $now + $expire;
$expiration = $this->gmt_iso8601($end);
// 最大文件大小.用户可以自己设置
$condition = array(0 => 'content-length-range', 1 => 0, 2 => 1048576000);
$conditions[] = $condition;
// 表示用户上传的数据,必须是以$dir开始,不然上传会失败,这一步不是必须项,只是为了安全起见,防止用户通过policy上传到别人的目录。
$start = array(0 => 'starts-with', 1 => '$key', 2 => $dir);
$conditions[] = $start;
$arr = array('expiration' => $expiration, 'conditions' => $conditions);
$policy = json_encode($arr);
$base64_policy = base64_encode($policy);
$string_to_sign = $base64_policy;
$signature = base64_encode(hash_hmac('sha1', $string_to_sign, $key, true));
$response = array();
$response['key'] = $dir . get_uuid() . substr(strrchr($options['filename'], '.'), 0);
$response['policy'] = $base64_policy;
$response['OSSAccessKeyId'] = $id;
$response['success_action_status'] = 200; // 让服务端返回200,不然,默认会返回204
$response['signature'] = $signature;
$response['host'] = $host;
$response['expire'] = $end;
$response['uniqidName'] = md5(uniqid(time())); // 非oss需要的参数
// 回调
$callback_param = array('callbackUrl' => url('callback'),
'callbackBody'=>'filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}',
'callbackBodyType'=>"application/x-www-form-urlencoded");
$callback_string = json_encode($callback_param);
$base64_callback_body = base64_encode($callback_string);
//$response['callback'] = $base64_callback_body;
apiReturn([
'code' => 200,
'msg' => '授权成功'
'data' => [
'params' => $response
]
]);
# 右侧演示页面源代码地址
# API
# Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
accept | 接受的文件类型,file 只支持H5 (只有微信小程序才支持把accept配置为all、media) | String | image | all | media | image | file | video |
capture | 图片或视频拾取模式,当accept为image类型时设置capture可选额外camera可以直接调起摄像头 | String | Array | ['album', 'camera'] | - |
compressed | 当accept为video时生效,是否压缩视频,默认为true | Boolean | true | false |
camera | 当accept为video时生效,可选值为back或front | String | back | - |
maxDuration | 当accept为video时生效,拍摄视频最长拍摄时间,单位秒 | Number | 60 | true |
uploadIcon | 上传区域的图标,只能内置图标 | String | camera-fill | - |
uploadIconColor | 上传区域的图标的颜色 | String | #D3D4D6 | - |
useBeforeRead | 是否启用(显示/隐藏)组件 | Boolean | false | true |
previewFullImage | previewFullImage | Boolean | true | false |
maxCount | 最大选择图片的数量 | String | Number | 52 | - |
disabled | 是否启用(显示/隐藏)组件 | Boolean | false | true |
imageMode | 预览上传的图片时的裁剪模式,和image组件mode属性一致 | String | aspectFill | - |
name | 标识符,可以在回调函数的第二项参数中获取 | String | file | - |
sizeType | original 原图,compressed 压缩图,默认二者都有,H5无效 | Array<String> | ['original', 'compressed'] | - |
multiple | 是否开启图片多选,部分安卓机型不支持 | Boolean | false | true |
deletable | 是否显示删除图片的按钮 | Boolean | true | false |
maxSize | 选择单个文件的最大大小,单位B(byte),默认不限制 | String | Number | Number.MAX_VALUE | - |
fileList | 显示已上传的文件列表 | Array | - | - |
uploadText | 上传区域的提示文字 | String | - | - |
width | 内部预览图片区域和选择图片按钮的区域宽度,单位rpx,不能是百分比,或者auto | String | Number | 80 | - |
height | 内部预览图片区域和选择图片按钮的区域高度,单位rpx,不能是百分比,或者auto | String | Number | 80 | - |
previewImage | 是否在上传完成后展示预览图 | Boolean | true | false |
autoDelete3.4.6 | 自动删除无需手动@delete处理 | Boolean | false | true |
autoUpload3.4.6 | 自动上传无需@afterRead中处理 | Boolean | false | true |
autoUploadApi3.4.6 | 自动上传的接口 | String | - | |
autoUploadDriver3.4.6 | 自动上传驱动 | String | local | oss,支持服务器本机和阿里云OSS上传 |
autoUploadAuthUrl3.4.6 | 自动上传OSS模式下,授权接口 | String | - | 阿里云OSS是前端上传方式,需后端提供授权签名接口。 |
autoUploadHeader3.4.6 | 自动上传模式下,携带的额外header,一般为比如Authorization等。 | Object | {} | - |
getVideoThumb3.4.6 | 视频上传后是否获取封面图 | Boolean | false | true |
# Methods
此方法如要通过ref手动调用
名称 | 说明 |
---|---|
afterRead | 读取后的处理函数 |
beforeRead | 读取前的处理函数 |
# Slot
slot中您可以内置任何您所需要的样式。
名称 | 说明 |
---|---|
-(default) | 自定义上传样式 |
-(trigger) | 自定义上传样式 |
# Events
回调参数中的event
参数,为当前删除元素的所有信息,index
为当前操作的图片的索引,name
为删除名称,file
包含删除的url信息
事件名 | 说明 | 回调参数 |
---|---|---|
afterRead | 读取后的处理函数 | (file, lists, name),错误信息 |
beforeRead | 读取前的处理函数 | (file, lists, name),错误信息 |
oversize | 图片大小超出最大允许大小 | (file, lists, name), name为通过props 传递的index 参数 |
clickPreview | 全屏预览图片时触发 | (url, lists, name),url为当前选中的图片地址,index为通过props 传递的index 参数 |
delete | 删除图片 | 传递index 回调 event 参数 包含index,file,name |