Upload 图片上传，用于选择或拍照进行上传图片。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

部分示例演示，完整使用请参考文档API。

自动上传

通过 immediate 属性设置是否自动上传，url 属性设置上传接口地址。 通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过 this.$refs.XXX 访问到对应的组件实例，并调用上面的实例方法。

<wui-upload immediate :url="url" ref="uploadRef" @success="success" @error="error" @complete="complete"></wui-upload>

  //上传接口地址
  const url = ref<any>(`${PORT2}/aliyunOss/uploadPicture/full`);
  //上传状态，用于保存或其他操作时做判断
  const status = ref<any>('');
  //上传的图片地址列表
  const urls = ref<any>([]);
const uploadRef = ref<any>('');
const success = e => {
    console.log(e);
    //上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
    let res = JSON.parse(e.res.data.replace(/\ufeff/g, '') || '{}');
    status.value = e.status;
    if (res.data.url) {
        //处理结果返回给组件
        //data.url为上传成功后返回的图片地址
        //e.index为图片索引值
        uploadRef.value.result(res.data.url, e.index);
    }
};
const error = e => {
    // if (e.res.statusCode === 401) {
    //     router.push('/pages/login/index');
    //     return;
    // }
    status.value = e.status;
};
const complete = e => {
    status.value = e.status;
    urls.value = e.urls;
    if (status.value === 'success' && e.action === 'upload') {
        Toast('上传完成！');
        //已上传完成的图片列表 this.urls
        console.log(urls.value);
    }
};

手动上传

通过 background 属性设置选择框背景色，addColor 属性设置加号颜色，fileList 属性设置默认展示的图片列表，url 属性设置上传接口地址。 通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过 this.$refs.XXX 访问到对应的组件实例，并调用上面的实例方法。

<view class="wui-btn__box">
	<wui-button type="gray" width="400rpx" height="84rpx" text="开始上传" bold @click="startUpload">
	</wui-button>
</view>
<wui-upload background="#333" addColor="#d1d1d1" :fileList="fileList" :url="url" ref="uploadRef" @success="success" @error="error" @complete="complete"></wui-upload>

 //上传接口地址
  const url = ref<any>(`${PORT2}/aliyunOss/uploadPicture/full`);
  //上传状态，用于保存或其他操作时做判断
  const status = ref<any>('');
  //上传的图片地址列表
  const urls = ref<any>([]);
  //初始化已上传的图片列表
  const fileList = ref<any>([
    'https://gjwlyy-specialdisease.oss-cn-hangzhou.aliyuncs.com/prileImg/1684822580918_.jpeg',
  ]);
onLoad(() => {
    urls.value = fileList.value;
});
const uploadRef = ref<any>('');
const success = e => {
    console.log(e);
    //上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
    let res = JSON.parse(e.res.data.replace(/\ufeff/g, '') || '{}');
    status.value = e.status;
    if (res.data.url) {
        //处理结果返回给组件
        //data.url为上传成功后返回的图片地址
        //e.index为图片索引值
        uploadRef.value.result(res.data.url, e.index);
    }
};
const error = e => {
    status.value = e.status;
    uni.showModal({
        content: JSON.stringify(e),
    });
};
const complete = e => {
    status.value = e.status;
    urls.value = e.urls;
    if (status.value === 'success' && e.action === 'upload') {
        Toast('上传完成！');
        //已上传完成的图片列表 urls.value
        console.log(urls.value);
    }
};
const startUpload = () => {
    if (!status.value || status.value !== 'preupload') {
        Toast('请选择需要上传的图片！');
        return;
    }
    //开始上传
    uploadRef.value.start();
};

Slots

插槽名称	说明
default	用于自定义上传加号图标

Props

属性名	类型	说明	默认值	平台差异说明
width	Number, String	选择框或图片宽度，单位rpx	200	-
height	Number, String	选择框或图片高度，单位rpx	200	-
fileList	Array	初始化默认展示的图片列表，仅初始化使用	[ ]	-
max	Number, String	最多可上传的图片张数	9	-
isAdd	Boolean	是否显示选择框，仅做展示时使用	true	-
addColor	String	选择框加号颜色	#333	-
addSize	Number, String	选择框加号大小，单位rpx	88	-
background	String	选择框背景颜色	#eee	-
radius	Number, String	选择框圆角值，单位rpx	0	-
borderColor	String	选择框边框颜色，设置颜色则边框生效，默认边框宽度1px	-	-
borderSytle	String	选择框边框样式，可选值：solid、dashed、dotted	solid	-
isDel	Boolean	是否显示删除图标，仅做展示时使用	true	-
delColor	String	删除图标颜色	rgba(0,0,0,.6)	-
confirmDel	Boolean	删除图片时是否弹框确认	false	-
url	String	图片上传接口地址	-	-
immediate	Boolean	是否立即/自动上传，为false时需要调用start方法手动上传或自行实现上传方法	false	-
sizeType	Array	original 原图，compressed 压缩图，默认二者都有	['original', 'compressed']	App、微信小程序、支付宝小程序、百度小程序
sourceType	Array	album 从相册选图，camera 使用相机，默认二者都有	['album', 'camera']	-
suffix	Array	图片后缀名范围列表，为空则不限制，如：['jpg','png']，则仅可上传jpg与png图片	[ ]	-
size	Number, String	单张图片大小限制，单位MB	4	-
name	String	文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容	file	-
header	Object	HTTP 请求 Header, header 中不能设置 Referer	{ }	-
formData	Object	HTTP 请求中其他额外的 form data	{ }	-
param	Number, String	自定义参数，事件中回传	0	-

Events

事件名	说明	回调参数
@success	图片上传成功时触发	{ status:上传状态 index:图片索引 res:服务器返回数据 param:自定义参数 }
@error	图片上传失败时触发	{ status:上传状态 index:图片索引 res:错误信息 param:自定义参数 }
@complete	图片选择、上传完成、删除时触发	{ status:上传状态 urls:上传的图片列表 action:当前动作，见下方说明 param:自定义参数 }
@preview	点击图片时触发，预览大图，仅百度小程序使用	{ index:当前索引值 urls:预览图片列表 }

// status：上传状态说明
preupload：尚有等待上传的图片
uploading：尚有正在上传的图片
success：全部上传成功
error：尚有上传失败的图片

//@complete 事件action参数说明：
action有效值为：choose、upload、delete。分别代表选择图片、上传、删除图片。

//温馨提示：图片上传后触发@success 事件，回调参数中包含服务器返回数据，
//根据接口返回数据处理，并将上传后的图片地址回传给组件。

Methods

通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过 this.$refs.XXX 访问到对应的组件实例，并调用上面的实例方法。

方法名	说明	传入参数
result	上传成功触发@success后，处理服务器返回数据，将图片地址返回给组件	(url, index) (图片地址,图片索引)
start	手动上传时，选择完图片后调用，开始上传