From e7a52552e92b1ed2dbfc03cd21b93f3f68afef95 Mon Sep 17 00:00:00 2001
From: yerz123 <yerz123@yeah.net>
Date: Thu, 22 Sep 2022 00:09:44 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/test/upload/index.js    | 14 +++++++
 src/views/test/upload/index.vue | 66 +++++++++++++++++++++++++++++++++
 2 files changed, 80 insertions(+)
 create mode 100644 src/api/test/upload/index.js
 create mode 100644 src/views/test/upload/index.vue

diff --git a/src/api/test/upload/index.js b/src/api/test/upload/index.js
new file mode 100644
index 0000000..cb91f59
--- /dev/null
+++ b/src/api/test/upload/index.js
@@ -0,0 +1,14 @@
+import request from '@/utils/request';
+import { setToken } from '@/utils/token-util';
+
+/**
+ * 上传图片
+ */
+export async function upload(data) {
+  const res = await request.post('/upload', data);
+  if (res.data.code === 0) {
+    setToken(res.data.data.access_token, data.remember);
+    return res.data.message;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
diff --git a/src/views/test/upload/index.vue b/src/views/test/upload/index.vue
new file mode 100644
index 0000000..8e96f30
--- /dev/null
+++ b/src/views/test/upload/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <ele-image-upload v-model="images" @upload="onUpload" />
+    <el-button @click="onSubmit">提交</el-button>
+  </div>
+</template>
+
+<script>
+  import EleImageUpload from 'ele-admin/es/ele-image-upload';
+  import { upload } from '@/api/test/upload';
+  // import request from '@/utils/request';
+
+  export default {
+    components: { EleImageUpload },
+    data() {
+      return {
+        images: []
+      };
+    },
+    methods: {
+      onUpload(item) {
+        // item 包含的字段参考前面说明
+        console.log('item:', item);
+        item.status = 'uploading';
+        const formData = new FormData();
+        console.log(item.file);
+        formData.append('file', item.file);
+        console.log(formData);
+        upload(formData)
+          .then((res) => {
+            console.log(res);
+          })
+          .catch((err) => {
+            console.log(err);
+          });
+        // request({
+        //     url: '/file/upload',
+        //     method: 'post',
+        //     data: formData,
+        //     onUploadProgress: (e) => {  // 文件上传进度回调
+        //         if (e.lengthComputable) {
+        //             item.progress = e.loaded / e.total * 100;
+        //         }
+        //     }
+        // }).then((res) => {
+        //     if(res.data.code === 0) {
+        //         item.status = 'done';
+        //         item.url = res.data.data.url;
+        //         // 如果你上传的不是图片格式, 建议将 url 字段作为缩略图, 再添加其它字段作为最后提交数据
+        //         //item.url = res.data.data.thumbnail;  // 也可以不赋值 url 字段, 默认会显示为一个文件图标
+        //         item.fileUrl = res.data.data.url;
+        //     }
+        // }).catch((e) => {
+        //     item.status = 'exception';
+        // });
+      },
+      onSubmit() {
+        // 这里你可以获取上传后的数据与其它表单数据一起提交
+        //const urls = this.images.map(d => d.url);
+        // 如果你是将 url 作为缩略图, 其它字段作为文件 url 可取你自定义的字段
+        //const urls = this.images.map(d => d.fileUrl);
+        //console.log('urls:', urls);
+      }
+    }
+  };
+</script>