Эх сурвалжийг харах

修复上传图片删除失效bug

tongshangming 2 жил өмнө
parent
commit
3862aa9d85

+ 6 - 0
src/components/form/ElFileUpload.vue

@@ -53,6 +53,11 @@ const handleUploadSuccess: UploadProps['onSuccess'] = (response, uploadFile: Upl
   }
 }
 
+// 删除文件
+const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
+  uploadList.value = uploadFiles
+}
+
 // 接口需要的属性
 props.item.extra = computed(() =>
   uploadList.value.map((item: any) => ({
@@ -73,6 +78,7 @@ if (!props.item.props?.onSuccess) {
     :action="isAbsolutePath(props.uploadApi) ? props.uploadApi : baseApi + props.uploadApi"
     :headers="headers"
     :before-upload="beforeUpload"
+    :on-remove="handleRemove"
     v-bind="{ ...attrs, ...$attrs }"
   >
     <template #[slot.name]="slotProps" v-for="slot in item.slots" :key="slot.alias">

+ 1 - 1
src/components/form/ElImageUpload.vue

@@ -64,7 +64,6 @@ const beforeUpload: UploadProps['beforeUpload'] = rawFile => {
 // 图片上传成功
 const uploadList = ref([...props.modelValue])
 const handleUploadSuccess: UploadProps['onSuccess'] = (response, uploadFile: UploadFile, uploadFiles: UploadFile[]) => {
-  console.log('uploadFiles', uploadFiles)
   if (response.success || response.code === 200) {
     // 附加oss路径
     uploadList.value = uploadFiles
@@ -75,6 +74,7 @@ const handleUploadSuccess: UploadProps['onSuccess'] = (response, uploadFile: Upl
 // 删除图片
 const handleRemove = (file: UploadFile) => {
   uploadRef.value.handleRemove(file)
+  uploadList.value = modelValue.value
 }
 // 图片预览
 const showViewer = ref(false)

+ 2 - 2
src/views/form/Basic.vue

@@ -249,7 +249,7 @@ const formConfig = reactive<BasicForm>({
     },
     {
       label: '文件',
-      value: 'erp/prod/temp/1700475908958.png,erp/prod/temp/1700475908960.png',
+      value: [],
       name: 'picture',
       type: 'image-upload',
       props: {
@@ -259,7 +259,7 @@ const formConfig = reactive<BasicForm>({
     },
     {
       label: '文件',
-      value: '[{"name":"1.png","url":"erp/prod/temp/1700531770130.png"}]',
+      value: '',
       name: 'file',
       type: 'file-upload',
       slots: [