赞
踩
可自定义设置以下属性:
接受上传的文件类型(accept),类型:string,默认 '*',,与<input type="file" />的 accept 属性一致,详见 input accept Attribute
是否支持多选文件(multiple),类型:boolean,默认 false
限制上传数量(maxCount),当为 1 时,始终用最新上传的文件代替当前文件,类型:number,默认 1
上传描述文字(tip),类型:string | slot,默认 'Upload'
预览图片缩放规则,仅当上传文件为图片时生效(fit),类型:'fill' | 'contain' | 'cover' | 'none' | 'scale-down',默认 'contain'
Space 组件属性配置(spaceProps),用于配置多个文件时的排列方式,类型:object,默认 {}
Spin 组件属性配置(spinProps),用于配置上传中样式,类型:object,默认 {}
Image 组件属性配置(imageProps),用于配置图片预览,类型:object,默认 {}
Message 组件属性配置(messageProps),用于配置操作消息提示,类型:object,默认 {}
操作成功的消息提示(actionMessage),传 {} 即可不显示任何消息提示,类型:{upload?: string, remove?: string },默认 { upload: '上传成功', remove: '删除成功' }
上传文件之前的钩子(beforeUpload),类型:Function,默认: () => true,参数为上传的文件,返回 false 则停止上传,返回 true 继续上传,通常用来现在用户上传的文件格式和大小
上传文件的方式(uploadMode),类型:'base64' | 'custom',默认 'base64'
自定义上传行为(customRequest),类型:Function,默认 () => {},只有 uploadMode: custom 时,才会使用 customRequest 自定义上传行为
是否禁用(disabled),类型:boolean,默认 false,禁用时只能预览,不能删除和上传
已上传的文件列表(v-model:file-list),类型:Array<{name?: string, url: any, [propName: string]: any}>,默认: []
效果如下图:在线预览
其中引入使用了以下组件:
①创建上传组件Upload.vue:
- <script setup lang="ts">
- import { ref, watchEffect } from 'vue'
- import Spin from '../spin'
- import Message from '../message'
- import Image from '../image'
- import Space from '../space'
- interface FileType {
- name?: string // 文件名
- url: any // 文件地址
- [propName: string]: any // 添加一个字符串索引签名,用于包含带有任意数量的其他属性
- }
- interface MessageType {
- upload?: string // 上传成功的消息提示,没有设置该属性时即不显示上传消息提示
- remove?: string // 删除成功的消息提示,没有设置该属性时即不显示删除消息提示
- }
- interface Props {
- accept?: string // 接受上传的文件类型,与 <input type="file" /> 的 accept 属性一致,参考 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input/file
- multiple?: boolean // 是否支持多选文件
- maxCount?: number // 限制上传数量。当为 1 时,始终用最新上传的文件代替当前文件
- tip?: string // 上传描述文字 string | slot
- fit?: 'contain' | 'fill' | 'cover' | 'none' | 'scale-down' // 预览图片缩放规则,仅当上传文件为图片时生效
- spaceProps?: object // Space 组件属性配置,用于配置多个文件时的排列方式
- spinProps?: object // Spin 组件属性配置,用于配置上传中样式
- imageProps?: object // Image 组件属性配置,用于配置图片预览
- messageProps?: object // Message 组件属性配置,用于配置操作消息提示
- actionMessage?: MessageType // 操作成功的消息提示,传 {} 即可不显示任何消息提示
- beforeUpload?: Function // 上传文件之前的钩子,参数为上传的文件,返回 false 则停止上传,返回 true 继续上传,通常用来现在用户上传的文件格式和大小
- uploadMode?: 'base64' | 'custom' // 上传文件的方式,默认是 base64,可选 'base64' | 'custom'
- customRequest?: Function // 自定义上传行为,只有 uploadMode: custom 时,才会使用 customRequest 自定义上传行为
- disabled?: boolean // 是否禁用,只能预览,不能删除和上传
- fileList?: FileType[] // (v-model) 已上传的文件列表
- }
- const props = withDefaults(defineProps<Props>(), {
- accept: '*', // 默认支持所有类型
- multiple: false,
- maxCount: 1,
- tip: 'Upload',
- fit: 'contain',
- spaceProps: () => ({}),
- spinProps: () => ({}),
- imageProps: () => ({}),
- messageProps: () => ({}),
- actionMessage: () => ({ upload: '上传成功', remove: '删除成功' }),
- beforeUpload: () => true,
- uploadMode: 'base64',
- customRequest: () => {},
- disabled: false,
- fileList: () => []
- })
- const uploadedFiles = ref<FileType[]>([]) // 上传文件列表
- const showUpload = ref(1)
- const uploading = ref<boolean[]>(Array(props.maxCount).fill(false))
- const uploadInput = ref()
- watchEffect(() => {
- // 回调立即执行一次,同时会自动跟踪回调中所依赖的所有响应式依赖
- initUpload()
- })
- function initUpload() {
- uploadedFiles.value = [...props.fileList]
- if (uploadedFiles.value.length > props.maxCount) {
- uploadedFiles.value.splice(props.maxCount)
- }
- if (props.disabled) {
- // 禁用
- showUpload.value = uploadedFiles.value.length
- } else {
- if (uploadedFiles.value.length < props.maxCount) {
- showUpload.value = props.fileList.length + 1
- } else {
- showUpload.value = props.maxCount
- }
- }
- }
- function isImage(url: string) {
- // 检查url是否为图片
- const imageUrlReg = /\.(jpg|jpeg|png|gif)$/i
- const base64Reg = /^data:image/
- return imageUrlReg.test(url) || base64Reg.test(url)
- }
- function isPDF(url: string) {
- // 检查url是否为pdf
- const pdfUrlReg = /\.pdf$/i
- const base64Reg = /^data:application\/pdf/
- return pdfUrlReg.test(url) || base64Reg.test(url)
- }
- function onDrop(e: DragEvent, index: number) {
- // 拖拽上传
- const files = e.dataTransfer?.files
- if (files?.length) {
- const len = files.length
- for (let n = 0; n < len; n++) {
- if (index + n <= props.maxCount) {
- uploadFile(files[n], index + n)
- } else {
- break
- }
- }
- // input的change事件默认保存上一次input的value值,同一value值(根据文件路径判断)在上传时不重新加载
- uploadInput.value[index].value = ''
- }
- }
- function onClick(index: number) {
- uploadInput.value[index].click()
- }
- function onUpload(e: any, index: number) {
- // 点击上传
- const files = e.target.files
- if (files?.length) {
- const len = files.length
- for (let n = 0; n < len; n++) {
- if (index + n < props.maxCount) {
- uploadFile(files[n], index + n)
- } else {
- break
- }
- }
- // input的change事件默认保存上一次input的value值,同一value值(根据文件路径判断)在上传时不重新加载
- uploadInput.value[index].value = ''
- }
- }
- const emits = defineEmits(['update:fileList', 'change', 'remove'])
- const uploadFile = (file: File, index: number) => {
- // 统一上传文件方法
- // console.log('开始上传 upload-event files:', file)
- if (props.beforeUpload(file)) {
- // 使用用户钩子进行上传前文件判断,例如大小、类型限制
- if (props.maxCount > showUpload.value) {
- showUpload.value++
- }
- if (props.uploadMode === 'base64') {
- // 以base64方式读取文件
- uploading.value[index] = true
- base64Upload(file, index)
- }
- if (props.uploadMode === 'custom') {
- // 自定义上传行为,需配合 customRequest 属性
- uploading.value[index] = true
- customUpload(file, index)
- }
- }
- }
- function base64Upload(file: File, index: number) {
- var reader = new FileReader()
- reader.readAsDataURL(file) // 以base64方式读取文件
- reader.onloadstart = function (e) {
- // 当读取操作开始时触发
- // reader.abort() // 取消上传
- // console.log('开始读取 onloadstart:', e)
- }
- reader.onabort = function (e) {
- // 当读取操作被中断时触发
- // console.log('读取中止 onabort:', e)
- }
- reader.onerror = function (e) {
- // 当读取操作发生错误时触发
- // console.log('读取错误 onerror:', e)
- }
- reader.onprogress = function (e) {
- // 在读取Blob时触发,读取上传进度,50ms左右调用一次
- // console.log('读取中 onprogress:', e)
- // console.log('已读取:', Math.ceil(e.loaded / e.total * 100))
- if (e.loaded === e.total) {
- // 上传完成
- uploading.value[index] = false // 隐藏loading状态
- }
- }
- reader.onload = function (e) {
- // 当读取操作成功完成时调用
- // console.log('读取成功 onload:', e)
- // 该文件的base64数据,如果是图片,则前端可直接用来展示图片
- uploadedFiles.value.push({
- name: file.name,
- url: e.target?.result
- })
- props.actionMessage.upload && messageRef.value.success(props.actionMessage.upload)
- emits('update:fileList', uploadedFiles.value)
- emits('change', uploadedFiles.value)
- }
- reader.onloadend = function (e) {
- // 当读取操作结束时触发(要么成功,要么失败)触发
- // console.log('读取结束 onloadend:', e)
- }
- }
- function customUpload(file: File, index: number) {
- props
- .customRequest(file)
- .then((res: any) => {
- uploadedFiles.value.push(res)
- props.actionMessage.upload && messageRef.value.success(props.actionMessage.upload)
- emits('update:fileList', uploadedFiles.value)
- emits('change', uploadedFiles.value)
- })
- .catch((err: any) => {
- if (props.maxCount > 1) {
- showUpload.value = uploadedFiles.value.length + 1
- }
- messageRef.value.error(err)
- })
- .finally(() => {
- uploading.value[index] = false
- })
- }
- const imageRef = ref()
- function onPreview(n: number, url: string) {
- if (isImage(url)) {
- const files = uploadedFiles.value.slice(0, n).filter((file) => !isImage(file.url))
- imageRef.value[n - files.length].preview(0)
- } else {
- window.open(url)
- }
- }
- function onRemove(index: number) {
- if (uploadedFiles.value.length < props.maxCount) {
- showUpload.value--
- }
- const removeFile = uploadedFiles.value.splice(index, 1)
- props.actionMessage.remove && messageRef.value.success(props.actionMessage.remove)
- emits('remove', removeFile)
- emits('update:fileList', uploadedFiles.value)
- emits('change', uploadedFiles.value)
- }
- const messageRef = ref()
- function onInfo(content: string) {
- messageRef.value.info(content)
- }
- function onSuccess(content: string) {
- messageRef.value.success(content)
- }
- function onError(content: string) {
- messageRef.value.error(content)
- }
- function onWarning(content: string) {
- messageRef.value.warning(content)
- }
- function onLoading(content: string) {
- messageRef.value.loading(content)
- }
- defineExpose({
- info: onInfo,
- success: onSuccess,
- error: onError,
- warning: onWarning,
- loading: onLoading
- })
- </script>
- <template>
- <div class="m-upload-list">
- <Space gap="small" v-bind="spaceProps">
- <div class="m-upload-item" v-for="n of showUpload" :key="n">
- <div class="m-upload">
- <div
- v-show="!uploading[n - 1] && !uploadedFiles[n - 1]"
- class="m-upload-wrap"
- :class="{ 'upload-disabled': disabled }"
- @dragenter.stop.prevent
- @dragover.stop.prevent
- @drop.stop.prevent="disabled ? () => false : onDrop($event, n - 1)"
- @click="disabled ? () => false : onClick(n - 1)"
- >
- <input
- ref="uploadInput"
- type="file"
- @click.stop
- :accept="accept"
- :multiple="multiple"
- @change="onUpload($event, n - 1)"
- style="display: none"
- />
- <div>
- <svg
- focusable="false"
- class="u-plus"
- data-icon="plus"
- width="1em"
- height="1em"
- fill="currentColor"
- aria-hidden="true"
- viewBox="64 64 896 896"
- >
- <defs></defs>
- <path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path>
- <path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path>
- </svg>
- <p class="u-tip">
- <slot>{{ tip }}</slot>
- </p>
- </div>
- </div>
- <div class="m-file-uploading" v-show="uploading[n - 1]">
- <Spin class="u-spin" tip="uploading" size="small" indicator="spin-line" v-bind="spinProps" />
- </div>
- <div class="m-file-preview" v-if="uploadedFiles[n - 1]">
- <Image
- v-if="isImage(uploadedFiles[n - 1].url)"
- ref="imageRef"
- :bordered="false"
- :width="82"
- :height="82"
- :src="uploadedFiles[n - 1].url"
- :name="uploadedFiles[n - 1].name"
- v-bind="imageProps"
- />
- <svg
- v-else-if="isPDF(uploadedFiles[n - 1].url)"
- class="u-file"
- focusable="false"
- data-icon="file-pdf"
- aria-hidden="true"
- viewBox="64 64 896 896"
- >
- <path
- d="M531.3 574.4l.3-1.4c5.8-23.9 13.1-53.7 7.4-80.7-3.8-21.3-19.5-29.6-32.9-30.2-15.8-.7-29.9 8.3-33.4 21.4-6.6 24-.7 56.8 10.1 98.6-13.6 32.4-35.3 79.5-51.2 107.5-29.6 15.3-69.3 38.9-75.2 68.7-1.2 5.5.2 12.5 3.5 18.8 3.7 7 9.6 12.4 16.5 15 3 1.1 6.6 2 10.8 2 17.6 0 46.1-14.2 84.1-79.4 5.8-1.9 11.8-3.9 17.6-5.9 27.2-9.2 55.4-18.8 80.9-23.1 28.2 15.1 60.3 24.8 82.1 24.8 21.6 0 30.1-12.8 33.3-20.5 5.6-13.5 2.9-30.5-6.2-39.6-13.2-13-45.3-16.4-95.3-10.2-24.6-15-40.7-35.4-52.4-65.8zM421.6 726.3c-13.9 20.2-24.4 30.3-30.1 34.7 6.7-12.3 19.8-25.3 30.1-34.7zm87.6-235.5c5.2 8.9 4.5 35.8.5 49.4-4.9-19.9-5.6-48.1-2.7-51.4.8.1 1.5.7 2.2 2zm-1.6 120.5c10.7 18.5 24.2 34.4 39.1 46.2-21.6 4.9-41.3 13-58.9 20.2-4.2 1.7-8.3 3.4-12.3 5 13.3-24.1 24.4-51.4 32.1-71.4zm155.6 65.5c.1.2.2.5-.4.9h-.2l-.2.3c-.8.5-9 5.3-44.3-8.6 40.6-1.9 45 7.3 45.1 7.4zm191.4-388.2L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z"
- ></path>
- </svg>
- <svg class="u-file" v-else focusable="false" data-icon="file" aria-hidden="true" viewBox="64 64 896 896">
- <path d="M534 352V136H232v752h560V394H576a42 42 0 01-42-42z" fill="#e6f7ff"></path>
- <path
- d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM602 137.8L790.2 326H602V137.8zM792 888H232V136h302v216a42 42 0 0042 42h216v494z"
- ></path>
- </svg>
- <div class="m-file-mask">
- <a class="m-icon" title="预览" @click="onPreview(n - 1, uploadedFiles[n - 1].url)">
- <svg class="u-icon" focusable="false" data-icon="eye" aria-hidden="true" viewBox="64 64 896 896">
- <path
- d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
- ></path>
- </svg>
- </a>
- <a class="m-icon" title="删除" @click.prevent.stop="onRemove(n - 1)" v-show="!disabled">
- <svg class="u-icon" focusable="false" data-icon="delete" aria-hidden="true" viewBox="64 64 896 896">
- <path
- d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
- ></path>
- </svg>
- </a>
- </div>
- </div>
- </div>
- </div>
- </Space>
- <Message ref="messageRef" v-bind="messageProps" />
- </div>
- </template>
- <style lang="less" scoped>
- .m-upload-list {
- display: inline-block;
- .m-upload-item {
- display: inline-block;
- }
- .mr8 {
- margin-right: 8px;
- }
- }
- .m-upload {
- position: relative;
- display: inline-block;
- width: 100px;
- height: 100px;
- .m-upload-wrap {
- display: flex;
- align-items: center;
- justify-content: center;
- text-align: center;
- width: 100px;
- height: 100px;
- border-radius: 8px;
- border: 1px dashed #d9d9d9;
- background-color: rgba(0, 0, 0, 0.02);
- cursor: pointer;
- transition: border-color 0.3s;
- &:hover {
- border-color: @themeColor;
- }
- .u-plus {
- display: inline-block;
- width: 14px;
- height: 14px;
- fill: rgba(0, 0, 0, 0.88);
- }
- .u-tip {
- margin-top: 8px;
- font-size: 14px;
- color: rgba(0, 0, 0, 0.88);
- line-height: 1.5714285714285714;
- }
- }
- .upload-disabled {
- cursor: not-allowed;
- &:hover {
- border-color: #d9d9d9;
- }
- }
- .m-file-uploading {
- width: 100px;
- height: 100px;
- padding: 8px;
- border-radius: 8px;
- border: 1px dashed #d9d9d9;
- background-color: rgba(0, 0, 0, 0.02);
- display: flex;
- align-items: center;
- text-align: center;
- .u-spin {
- display: inline-block;
- :deep(.u-tip) {
- max-width: 82px;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
- }
- .m-file-preview {
- position: relative;
- padding: 8px;
- width: 100px;
- height: 100px;
- border-radius: 8px;
- padding: 8px;
- border: 1px solid #d9d9d9;
- display: flex;
- align-items: center;
- text-align: center;
- .u-file {
- display: inline-block;
- width: 100%;
- height: 60px;
- fill: @themeColor;
- }
- .m-file-mask {
- // top right bottom left 简写为 inset: 0
- // insert 无论元素的书写模式、行内方向和文本朝向如何,其所定义的都不是逻辑偏移而是实体偏移
- position: absolute;
- inset: 0;
- margin: 8px;
- display: flex;
- align-items: center;
- justify-content: center;
- background: rgba(0, 0, 0, 0.5);
- opacity: 0;
- pointer-events: none;
- transition: opacity 0.3s;
- .m-icon {
- display: inline-block;
- height: 16px;
- margin: 0 4px;
- cursor: pointer;
- .u-icon {
- display: inline-block;
- width: 16px;
- height: 16px;
- fill: rgba(255, 255, 255, 0.65);
- cursor: pointer;
- transition: all 0.3s;
- &:hover {
- fill: rgba(255, 255, 255, 1);
- }
- }
- }
- }
- &:hover {
- .m-file-mask {
- opacity: 1;
- pointer-events: auto;
- }
- }
- }
- }
- </style>
②在要使用的页面引入:
- <script setup lang="ts">
- import { ref, watchEffect } from 'vue'
- const uploadRef = ref()
- const files = ref([])
- const fileList = ref([
- {
- name: '1.jpg',
- url: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/1.jpg'
- },
- {
- name: 'Markdown.pdf',
- url: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/Markdown.pdf'
- }
- ])
- const imageList = ref([
- {
- name: '1.jpg',
- url: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/1.jpg'
- }
- ])
- watchEffect(() => {
- console.log('files:', files.value)
- })
- watchEffect(() => {
- console.log('fileList:', fileList.value)
- })
- watchEffect(() => {
- console.log('imageList:', imageList.value)
- })
- function onBeforeUpload(file: File) {
- const acceptTypes = ['image/jpg', 'image/jpeg', 'image/png', 'application/pdf']
- if (file.size > 500 * 1024) {
- // 文件大于 500KB 时取消上传
- uploadRef.value.warning('文件必须小于500KB')
- return false // 停止上传
- }
- if (!acceptTypes.includes(file.type)) {
- // 继续上传
- uploadRef.value.error('只能上传jpg、jpeg、png、pdf格式的文件')
- return false // 停止上传
- }
- return true // 继续上传
- }
- function onCustomRequest(file: File) {
- return new Promise((resolve, reject) => {
- setTimeout(() => {
- // 模拟接口调用返回name和url
- if (file.type === 'application/pdf') {
- var res = {
- name: 'Markdown.pdf',
- url: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/Markdown.pdf'
- }
- } else {
- var res = {
- name: '1.jpg',
- url: 'https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/1.jpg'
- }
- }
- if (res) {
- resolve(res)
- } else {
- reject('upload request fail ...')
- }
- }, 1000)
- })
- }
- interface FileType {
- name?: string // 文件名
- url: any // 文件地址
- [propName: string]: any // 添加一个字符串索引签名,用于包含带有任意数量的其他属性
- }
- function onChange(files: FileType[]) {
- console.log('change:', files)
- }
- function onRemove(file: FileType) {
- console.log('remove:', file)
- }
- </script>
- <template>
- <div>
- <h1>{{ $route.name }} {{ $route.meta.title }}</h1>
- <h2 class="mt30 mb10">基本使用</h2>
- <Upload v-model:fileList="files" />
- <h2 class="mt30 mb10">禁用</h2>
- <h3 class="mb10">只能预览,不能删除和上传</h3>
- <Upload disabled v-model:fileList="fileList" />
- <h2 class="mt30 mb10">多文件上传</h2>
- <h3 class="mb10">限制上传数量为3</h3>
- <Upload multiple :max-count="3" v-model:fileList="fileList" />
- <h2 class="mt30 mb10">自定义样式</h2>
- <h3 class="mb10">缩略图等比覆盖,上传描述文字使用:上传</h3>
- <Upload :max-count="3" tip="上传" fit="cover" v-model:fileList="fileList" />
- <h2 class="mt30 mb10">限制文件大小和类型</h2>
- <h3 class="mb10">上传文件最大500KB,同时文件类型只能是图片</h3>
- <Upload
- ref="uploadRef"
- accept="image/*,application/pdf"
- :max-count="3"
- :before-upload="onBeforeUpload"
- v-model:fileList="imageList"
- @change="onChange"
- @remove="onRemove"
- />
- <h2 class="mt30 mb10">自定义上传行为</h2>
- <Upload
- multiple
- :max-count="5"
- upload-mode="custom"
- :custom-request="onCustomRequest"
- v-model:fileList="fileList"
- @change="onChange"
- @remove="onRemove"
- />
- </div>
- </template>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。