上传图片

2022-09-22 00:09:44 +08:00
parent 3848059e3e
commit e7a52552e9
2 changed files with 80 additions and 0 deletions
@@ -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));
+}
@@ -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>