update

src/components/custom/custom-upload.vue

@@ -0,0 +1,80 @@
+<template>
+  <div id="custom-upload">
+    <el-upload
+      v-if="url"
+      ref="upload"
+      :action="url"
+      :limit="limit"
+      :accept="accept"
+      :list-type="listType"
+      :file-list="list"
+      :on-exceed="outLimit"
+      :on-preview="filePreview"
+      :on-success="onSuccess"
+      :before-remove="onRemove"
+    >
+      <el-button type="primary" size="mini">选择文件</el-button>
+      <template #tip v-if="tip">
+        <p style="color: #ff0000">{{ tip }}</p>
+      </template>
+    </el-upload>
+  </div>
+</template>
+
+<script setup>
+import { ElMessage } from 'element-plus'
+import { get, omit, cloneDeep, isArray } from 'lodash-es'
+const props = defineProps({
+  modelValue: { type: Array },
+  // 图片上传地址
+  url: { type: String },
+  // 可上传文件数目
+  limit: { type: Number },
+  // 接收上传的文件类型
+  accept: { type: String, default: 'image/png, image/jpeg' },
+  // 文件列表的类型--picture-card---picture
+  listType: { type: String, default: 'picture-card' },
+  // 文件提醒
+  tip: { type: String, default: undefined }
+})
+const emits = defineEmits(['update:modelValue', 'dataChange', 'save'])
+const list = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emits('update:modelValue', value)
+  }
+})
+// 图片预览
+const filePreview = (file) => {
+  // this.dialog = { show: true, url: file.url };
+  window.open(file.url)
+}
+// 只允许上传多少个文件
+const outLimit = () => {
+  ElMessage.error(`只允许上传${props.limit}个文件`)
+}
+const onSuccess = (response, file) => {
+  if (response.errcode != 0) {
+    ElMessage.error({ message: `上传失败`, type: 'error' })
+    return
+  }
+  response = omit(response, ['errcode', 'errmsg'])
+  let l = cloneDeep(list.value)
+  if (isArray(l)) {
+    l.push({ ...response, name: file.name, url: response.uri })
+  } else {
+    l = [{ ...response, name: file.name, url: response.uri }]
+  }
+  emits('update:modelValue', l)
+}
+// 删除图片
+const onRemove = (file, fileList) => {
+  let l = cloneDeep(l)
+  l = l.filter((f) => f.uri !== get(file, 'uri'))
+  emits('update:modelValue', l)
+  return true
+}
+</script>
+<style scoped></style>