From a30e403a2cd361338a8e53d17b0557b7cb1d6020 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=80=81=E5=8F=B6?= <yerz@shengshi.com.cn>
Date: Thu, 22 Sep 2022 15:43:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E4=B8=8A=E6=AC=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/test/upload/index.js    |  26 ++++++--
 src/views/test/upload/index.vue | 114 ++++++++++++++++++++++----------
 2 files changed, 98 insertions(+), 42 deletions(-)

diff --git a/src/api/test/upload/index.js b/src/api/test/upload/index.js
index cb91f59..47d086e 100644
--- a/src/api/test/upload/index.js
+++ b/src/api/test/upload/index.js
@@ -1,14 +1,28 @@
 import request from '@/utils/request';
-import { setToken } from '@/utils/token-util';
+//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));
+  return res;
+  // 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));
+  // request({
+  //   url: '/upload',
+  //   method: 'post',
+  //   data: data,
+  //   onUploadProgress: (e) => {
+  //     if (e.lengthComputable) {
+  //       //item.progress = e.loaded / e.total* 100;
+  //     }
+  //   }
+  // }).then((res) => {
+  //   console.log(1111);
+  //   console.log(res);
+  // });
 }
diff --git a/src/views/test/upload/index.vue b/src/views/test/upload/index.vue
index 8e96f30..d068f65 100644
--- a/src/views/test/upload/index.vue
+++ b/src/views/test/upload/index.vue
@@ -1,14 +1,21 @@
 <template>
   <div>
-    <ele-image-upload v-model="images" @upload="onUpload" />
-    <el-button @click="onSubmit">提交</el-button>
+    <ele-image-upload
+      v-model="images"
+      :limit="1"
+      :drag="true"
+      :multiple="false"
+      :upload-handler="uploadHandler"
+      @upload="onUpload"
+    />
+    <el-button @click="onSubmit">提交的时候提起URL</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';
+  // import { upload } from '@/api/test/upload';
+  import request from '@/utils/request';
 
   export default {
     components: { EleImageUpload },
@@ -18,48 +25,83 @@
       };
     },
     methods: {
+      /* 上传事件 */
+      uploadHandler(file) {
+        const item = {
+          file,
+          uid: file.uid,
+          name: file.name,
+          progress: 0,
+          status: null
+        };
+        if (!file.type.startsWith('image')) {
+          this.$message.error('只能选择图片');
+          return;
+        }
+        if (file.size / 1024 / 1024 > 2) {
+          this.$message.error('大小不能超过 2MB');
+          return;
+        }
+        item.url = window.URL.createObjectURL(file);
+        // 关键就是这里要自己 push 添加数据而不是靠 v-modal 自动更新
+        this.images.push(item);
+        this.onUpload(item);
+      },
+      /* 上传 item */
       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)
+        request({
+          url: '/upload',
+          method: 'post',
+          data: formData,
+          onUploadProgress: (e) => {
+            if (e.lengthComputable) {
+              item.progress = (e.loaded / e.total) * 100;
+            }
+          }
+        })
           .then((res) => {
-            console.log(res);
+            if (res.data.code === 0) {
+              item.status = 'done';
+              item.url = res.data.data.full_url;
+              item.fileUrl = res.data.data.url;
+            }
           })
-          .catch((err) => {
-            console.log(err);
+          .catch(() => {
+            item.status = 'exception';
           });
-        // 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';
-        // });
       },
+      // /* 上传 item */
+      // onUpload(item) {
+      //   const loading = this.$messageLoading('上传中..');
+      //   const formData = new FormData();
+      //   formData.append('file', item.file);
+      //   upload(formData)
+      //     .then((res) => {
+      //       loading.close();
+      //       console.log(res);
+      //       if (res.data.code === 0) {
+      //         item.status = 'done';
+      //         item.url = res.data.data.full_url;
+      //         item.fileUrl = res.data.data.url;
+      //       } else {
+      //         item.status = 'exception';
+      //       }
+      //       console.log(item);
+      //       console.log('images');
+      //       console.log(this.images);
+      //     })
+      //     .catch(() => {
+      //       console.log(111);
+      //       loading.close();
+      //     });
+      // },
       onSubmit() {
-        // 这里你可以获取上传后的数据与其它表单数据一起提交
         //const urls = this.images.map(d => d.url);
-        // 如果你是将 url 作为缩略图, 其它字段作为文件 url 可取你自定义的字段
-        //const urls = this.images.map(d => d.fileUrl);
-        //console.log('urls:', urls);
+        const urls = this.images.map((d) => d.fileUrl);
+        console.log('urls:', urls);
       }
     }
   };