|
@@ -25,21 +25,21 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import type { Ref } from 'vue';
|
|
|
-import { ref, toRefs } from 'vue';
|
|
|
-import { ElMessage } from 'element-plus';
|
|
|
-import _ from 'lodash';
|
|
|
+import type { Ref } from 'vue'
|
|
|
+import { ref, toRefs } from 'vue'
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
+import _ from 'lodash'
|
|
|
|
|
|
// #region
|
|
|
interface ListItem {
|
|
|
- errcode?: string | number;
|
|
|
- errmsg?: string;
|
|
|
- uri?: string;
|
|
|
- name?: string;
|
|
|
- url?: string;
|
|
|
- id?: any;
|
|
|
+ errcode?: string | number
|
|
|
+ errmsg?: string
|
|
|
+ uri?: string
|
|
|
+ name?: string
|
|
|
+ url?: string
|
|
|
+ id?: any
|
|
|
}
|
|
|
-let dialog: Ref<{ show: boolean; url: string }> = ref({ show: false, url: '' });
|
|
|
+let dialog: Ref<{ show: boolean; url: string }> = ref({ show: false, url: '' })
|
|
|
const props = defineProps({
|
|
|
url: { type: String, default: () => '' },
|
|
|
limit: { type: Number, default: () => 6 },
|
|
@@ -47,55 +47,56 @@ const props = defineProps({
|
|
|
listType: { type: String, default: () => 'text' }, //'text' | 'picture' | 'picture-card'
|
|
|
tip: { type: String, default: () => undefined },
|
|
|
list: { type: Array<ListItem>, default: () => [] },
|
|
|
- model: { type: String, default: () => '' },
|
|
|
-});
|
|
|
+ model: { type: String, default: () => '' }
|
|
|
+})
|
|
|
// 图片上传地址
|
|
|
-const { url } = toRefs(props);
|
|
|
+const { url } = toRefs(props)
|
|
|
// 可上传文件数目
|
|
|
-const { limit } = toRefs(props);
|
|
|
+const { limit } = toRefs(props)
|
|
|
// 接收上传的文件类型
|
|
|
-const { accept } = toRefs(props);
|
|
|
+const { accept } = toRefs(props)
|
|
|
// 文件列表的类型--picture-card---picture
|
|
|
-const { listType } = toRefs(props);
|
|
|
+const { listType } = toRefs(props)
|
|
|
// 文件提醒
|
|
|
-const { tip } = toRefs(props);
|
|
|
+const { tip } = toRefs(props)
|
|
|
// 已有数据,赋值,预览
|
|
|
-const { list } = toRefs(props);
|
|
|
-const { model } = toRefs(props);
|
|
|
+const { list } = toRefs(props)
|
|
|
+const { model } = toRefs(props)
|
|
|
// const list = ref<UploadUserFile[]>([]);
|
|
|
|
|
|
-const emit = defineEmits(['change']);
|
|
|
+const emit = defineEmits(['change'])
|
|
|
// 图片预览
|
|
|
const filePreview = (file: { url: string }) => {
|
|
|
// this.dialog = { show: true, url: file.url };
|
|
|
- window.open(file.url);
|
|
|
-};
|
|
|
+ window.open(file.url)
|
|
|
+}
|
|
|
// 只允许上传多少个文件
|
|
|
const outLimit = () => {
|
|
|
- ElMessage.error(`只允许上传${limit.value}个文件`);
|
|
|
-};
|
|
|
+ ElMessage.error(`只允许上传${limit.value}个文件`)
|
|
|
+}
|
|
|
// 上传成功,response:成功信息,file:图片信息,fileList:图片列表
|
|
|
-const onSuccess = (response: { errcode: string | number; errmsg: string; uri: string }, file: { name: string }, fileList: any) => {
|
|
|
+const onSuccess = (response: { errcode: string | number; errmsg: string; uri: string }, file: { name: string }) => {
|
|
|
if (response.errcode !== 0) {
|
|
|
- ElMessage({ type: 'error', message: '删除成功' });
|
|
|
- return;
|
|
|
+ ElMessage({ type: 'error', message: '删除成功' })
|
|
|
+ return
|
|
|
}
|
|
|
- let ponse = _.omit(response, ['errcode', 'errmsg']);
|
|
|
- let arr: Ref<ListItem[]> = _.cloneDeep(list);
|
|
|
+ let ponse = _.omit(response, ['errcode', 'errmsg'])
|
|
|
+ let arr: Ref<ListItem[]> = _.cloneDeep(list)
|
|
|
if (_.isArray(list.value)) {
|
|
|
- arr.value.push({ ...ponse, name: file.name, url: `${import.meta.env.VITE_APP_HOST}${response.uri}` });
|
|
|
+ arr.value.push({ ...ponse, name: file.name, url: `${import.meta.env.VITE_APP_HOST}${response.uri}` })
|
|
|
} else {
|
|
|
- arr.value = [{ ...ponse, name: file.name, url: `${import.meta.env.VITE_APP_HOST}${response.uri}` }];
|
|
|
+ arr.value = [{ ...ponse, name: file.name, url: `${import.meta.env.VITE_APP_HOST}${response.uri}` }]
|
|
|
}
|
|
|
- emit('change', { model: model.value, value: arr.value });
|
|
|
-};
|
|
|
+ emit('change', { model: model.value, value: arr.value })
|
|
|
+}
|
|
|
// 删除图片
|
|
|
-const onRemove = (file: { id: any; uri: string }, fileList: any) => {
|
|
|
+// file: { id: any; uri: string }, fileList: any
|
|
|
+const onRemove = () => {
|
|
|
// let arr: Ref<ListItem[]> = _.cloneDeep(list);
|
|
|
// let info = arr.value.filter((f) => f.id != file.id);
|
|
|
// emit('change', info);
|
|
|
- return true;
|
|
|
-};
|
|
|
+ return true
|
|
|
+}
|
|
|
|
|
|
// #endregion
|
|
|
</script>
|