|
@@ -6,9 +6,9 @@ import {
|
|
|
UploadFileInfo,
|
|
|
useMessage
|
|
|
} from 'naive-ui'
|
|
|
-import {defineComponent, watch, PropType, reactive, ref} from 'vue'
|
|
|
+import { defineComponent, watch, PropType, reactive, ref } from 'vue'
|
|
|
import Copper from './copper'
|
|
|
-import {getUploadSign, onFileUpload, onOnlyFileUpload} from '@/utils/oss-file-upload'
|
|
|
+import { getUploadSign, onFileUpload, onOnlyFileUpload } from '@/utils/oss-file-upload'
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'upload-file',
|
|
@@ -105,8 +105,14 @@ export default defineComponent({
|
|
|
}
|
|
|
},
|
|
|
// readFileInputEventAsArrayBuffer 只会在文件的时间回调
|
|
|
- emits: ['update:fileList', 'upload:success', 'close', 'readFileInputEventAsArrayBuffer', 'remove'],
|
|
|
- setup(props, {slots, attrs, emit, expose}) {
|
|
|
+ emits: [
|
|
|
+ 'update:fileList',
|
|
|
+ 'upload:success',
|
|
|
+ 'close',
|
|
|
+ 'readFileInputEventAsArrayBuffer',
|
|
|
+ 'remove'
|
|
|
+ ],
|
|
|
+ setup(props, { slots, attrs, emit, expose }) {
|
|
|
const ossUploadUrl = `https://${props.bucketName}.ks3-cn-beijing.ksyuncs.com/`
|
|
|
const message = useMessage()
|
|
|
const visiable = ref<boolean>(false)
|
|
@@ -124,7 +130,7 @@ export default defineComponent({
|
|
|
|
|
|
const fileListRef = ref<UploadFileInfo[]>([])
|
|
|
const initFileList = () => {
|
|
|
- console.log('desc',props.desc)
|
|
|
+ console.log('desc', props.desc)
|
|
|
if (props.fileList) {
|
|
|
console.log('downloadUrl', props.fileList)
|
|
|
const splitName = props.fileList.split('/')
|
|
@@ -137,7 +143,7 @@ export default defineComponent({
|
|
|
}
|
|
|
]
|
|
|
} else if (Array.isArray(props.imageList)) {
|
|
|
- console.log(Array.isArray(props.imageList), props.imageList, 'Array.isArray(props.imageList)')
|
|
|
+ // console.log(Array.isArray(props.imageList), props.imageList, 'Array.isArray(props.imageList)')
|
|
|
let list: any = []
|
|
|
props.imageList.forEach((n: any) => {
|
|
|
const splitName = n.split('/')
|
|
@@ -155,18 +161,18 @@ export default defineComponent({
|
|
|
}
|
|
|
initFileList()
|
|
|
watch(
|
|
|
- () => props.imageList,
|
|
|
- () => {
|
|
|
- initFileList()
|
|
|
- },
|
|
|
- {deep: true}
|
|
|
+ () => props.imageList,
|
|
|
+ () => {
|
|
|
+ initFileList()
|
|
|
+ },
|
|
|
+ { deep: true }
|
|
|
)
|
|
|
watch(
|
|
|
- () => props.fileList,
|
|
|
- () => {
|
|
|
- console.log('list')
|
|
|
- initFileList()
|
|
|
- }
|
|
|
+ () => props.fileList,
|
|
|
+ () => {
|
|
|
+ console.log('list')
|
|
|
+ initFileList()
|
|
|
+ }
|
|
|
)
|
|
|
const handleClearFile = () => {
|
|
|
uploadRef.value?.clear()
|
|
@@ -226,7 +232,7 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
// const { data } = await policy(obj)
|
|
|
- const {data} = await getUploadSign(obj)
|
|
|
+ const { data } = await getUploadSign(obj)
|
|
|
|
|
|
state.policy = data.policy
|
|
|
state.signature = data.signature
|
|
@@ -250,19 +256,19 @@ export default defineComponent({
|
|
|
}
|
|
|
|
|
|
const onCustomRequest = ({
|
|
|
- file,
|
|
|
- // data,
|
|
|
- // headers,
|
|
|
- // withCredentials,
|
|
|
- action,
|
|
|
- onFinish,
|
|
|
- onError,
|
|
|
- onProgress
|
|
|
- }: UploadCustomRequestOptions) => {
|
|
|
+ file,
|
|
|
+ // data,
|
|
|
+ // headers,
|
|
|
+ // withCredentials,
|
|
|
+ action,
|
|
|
+ onFinish,
|
|
|
+ onError,
|
|
|
+ onProgress
|
|
|
+ }: UploadCustomRequestOptions) => {
|
|
|
const item = state
|
|
|
|
|
|
item.file = file
|
|
|
- onFileUpload({file, action, data: item, onProgress, onFinish, onError})
|
|
|
+ onFileUpload({ file, action, data: item, onProgress, onFinish, onError })
|
|
|
}
|
|
|
|
|
|
const onFinish = (options: any) => {
|
|
@@ -302,7 +308,7 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
// const { data } = await policy(obj)
|
|
|
- const {data} = await getUploadSign(obj)
|
|
|
+ const { data } = await getUploadSign(obj)
|
|
|
|
|
|
state.policy = data.policy
|
|
|
state.signature = data.signature
|
|
@@ -333,47 +339,47 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
return () => (
|
|
|
- <div>
|
|
|
- <NUpload
|
|
|
- ref={uploadRef}
|
|
|
- action={ossUploadUrl}
|
|
|
- customRequest={onCustomRequest}
|
|
|
- data={state}
|
|
|
- v-model:fileList={fileListRef.value}
|
|
|
- listType={props.listType}
|
|
|
- accept={props.accept}
|
|
|
- multiple={props.multiple}
|
|
|
- max={props.max}
|
|
|
- disabled={props.disabled}
|
|
|
- showFileList={props.showFileList}
|
|
|
- showPreviewButton
|
|
|
- onBeforeUpload={(options: any) => onBeforeUpload(options)}
|
|
|
- onFinish={(options: any) => onFinish(options)}
|
|
|
- onRemove={(options: any) => onRemove(options)}
|
|
|
- >
|
|
|
- {props.listType === 'image' && (
|
|
|
- <NButton loading={btnLoading.value} type="primary">
|
|
|
- {props.text}
|
|
|
- </NButton>
|
|
|
- )}
|
|
|
- </NUpload>
|
|
|
- {props.tips && <p style="font-size: 13px; color: #666; padding-top: 4px;">{props.tips}</p>}
|
|
|
+ <div>
|
|
|
+ <NUpload
|
|
|
+ ref={uploadRef}
|
|
|
+ action={ossUploadUrl}
|
|
|
+ customRequest={onCustomRequest}
|
|
|
+ data={state}
|
|
|
+ v-model:fileList={fileListRef.value}
|
|
|
+ listType={props.listType}
|
|
|
+ accept={props.accept}
|
|
|
+ multiple={props.multiple}
|
|
|
+ max={props.max}
|
|
|
+ disabled={props.disabled}
|
|
|
+ showFileList={props.showFileList}
|
|
|
+ showPreviewButton
|
|
|
+ onBeforeUpload={(options: any) => onBeforeUpload(options)}
|
|
|
+ onFinish={(options: any) => onFinish(options)}
|
|
|
+ onRemove={(options: any) => onRemove(options)}
|
|
|
+ >
|
|
|
+ {props.listType === 'image' && (
|
|
|
+ <NButton loading={btnLoading.value} type="primary">
|
|
|
+ {props.text}
|
|
|
+ </NButton>
|
|
|
+ )}
|
|
|
+ </NUpload>
|
|
|
+ {props.tips && <p style="font-size: 13px; color: #666; padding-top: 4px;">{props.tips}</p>}
|
|
|
|
|
|
- <NModal
|
|
|
- v-model:show={visiable.value}
|
|
|
- preset="dialog"
|
|
|
- showIcon={false}
|
|
|
- title="上传图片"
|
|
|
- style={{width: '800px'}}
|
|
|
- >
|
|
|
- {/* @cropper-no="error" @cropper-ok="success" */}
|
|
|
- <Copper
|
|
|
- ref={CropperModal}
|
|
|
- onClose={() => (visiable.value = false)}
|
|
|
- onCropperOk={cropperOk}
|
|
|
- />
|
|
|
- </NModal>
|
|
|
- </div>
|
|
|
+ <NModal
|
|
|
+ v-model:show={visiable.value}
|
|
|
+ preset="dialog"
|
|
|
+ showIcon={false}
|
|
|
+ title="上传图片"
|
|
|
+ style={{ width: '800px' }}
|
|
|
+ >
|
|
|
+ {/* @cropper-no="error" @cropper-ok="success" */}
|
|
|
+ <Copper
|
|
|
+ ref={CropperModal}
|
|
|
+ onClose={() => (visiable.value = false)}
|
|
|
+ onCropperOk={cropperOk}
|
|
|
+ />
|
|
|
+ </NModal>
|
|
|
+ </div>
|
|
|
)
|
|
|
}
|
|
|
})
|