init

.env.development

@@ -18,3 +18,5 @@ VUE_APP_XXL_JOB_ADMIN = 'http://localhost:9100/xxl-job-admin'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
+
+VUE_APP_COS_BASE_URL = 'https://nono-1257812345.cos.ap-shanghai.myqcloud.com/'

.env.production

@@ -16,4 +16,4 @@ VUE_APP_MONITRO_ADMIN = '/admin/applications'
 # xxl-job 控制台地址
 VUE_APP_XXL_JOB_ADMIN = '/xxl-job-admin'
 
-
+VUE_APP_COS_BASE_URL = 'https://nono-1257812345.cos.ap-shanghai.myqcloud.com/'

src/components/ImagePreview/index.vue

@@ -13,6 +13,8 @@
 
 <script>
 
+import {isExternal} from "@/utils/validate";
+
 export default {
   name: "ImagePreview",
   props: {
@@ -27,7 +29,8 @@ export default {
     height: {
       type: [Number, String],
       default: ""
-    }
+    },
+
   },
   computed: {
     realSrc() {
@@ -35,7 +38,12 @@ export default {
         return;
       }
       let real_src = this.src.split(",")[0];
-      return real_src;
+      if(isExternal(real_src)){
+        return real_src;
+      }
+      console.log(process.env.VUE_APP_COS_BASE_URL);
+      console.log(process.env.VUE_APP_BASE_API);
+      return process.env.VUE_APP_COS_BASE_URL + real_src;
     },
     realSrcList() {
       if (!this.src) {
@@ -44,7 +52,10 @@ export default {
       let real_src_list = this.src.split(",");
       let srcList = [];
       real_src_list.forEach(item => {
-        return srcList.push(item);
+        if (isExternal(item)) {
+          return srcList.push(item);
+        }
+        return srcList.push(process.env.VUE_APP_COS_BASE_URL + item);
       });
       return srcList;
     },

src/components/ImageUpload2/index.vue

@@ -1,21 +1,21 @@
 <template>
   <div class="component-upload-image">
     <el-upload
-        multiple
+      multiple
-        :action="uploadImgUrl"
+      :action="uploadImgUrl"
-        list-type="picture-card"
+      list-type="picture-card"
-        :on-success="handleUploadSuccess"
+      :on-success="handleUploadSuccess"
-        :before-upload="handleBeforeUpload"
+      :before-upload="handleBeforeUpload"
-        :limit="limit"
+      :limit="limit"
-        :on-error="handleUploadError"
+      :on-error="handleUploadError"
-        :on-exceed="handleExceed"
+      :on-exceed="handleExceed"
-        name="file"
+      ref="imageUpload"
-        :on-remove="handleRemove"
+      :on-remove="handleDelete"
-        :show-file-list="true"
+      :show-file-list="true"
-        :headers="headers"
+      :headers="headers"
-        :file-list="fileList"
+      :file-list="fileList"
-        :on-preview="handlePictureCardPreview"
+      :on-preview="handlePictureCardPreview"
-        :class="{hide: this.fileList.length >= this.limit}"
+      :class="{hide: this.fileList.length >= this.limit}"
     >
       <i class="el-icon-plus"></i>
     </el-upload>
@@ -29,14 +29,14 @@
     </div>
 
     <el-dialog
-        :visible.sync="dialogVisible"
+      :visible.sync="dialogVisible"
-        title="预览"
+      title="预览"
-        width="800"
+      width="800"
-        append-to-body
+      append-to-body
     >
       <img
-          :src="dialogImageUrl"
+        :src="dialogImageUrl"
-          style="display: block; max-width: 100%; margin: 0 auto"
+        style="display: block; max-width: 100%; margin: 0 auto"
       />
     </el-dialog>
   </div>
@@ -44,6 +44,7 @@
 
 <script>
 import { getToken } from "@/utils/auth";
+import { listByIds, delOss } from "@/api/system/oss";
 
 export default {
   props: {
@@ -55,7 +56,7 @@ export default {
     },
     // 大小限制(MB)
     fileSize: {
-      type: Number,
+       type: Number,
       default: 5,
     },
     // 文件类型, 例如['png', 'jpg', 'jpeg']
@@ -86,22 +87,25 @@ export default {
   },
   watch: {
     value: {
-      handler(val) {
+      async handler(val) {
         if (val) {
           // 首先将值转为数组
-          const list = Array.isArray(val) ? val : this.value.split(',');
+          let list;
+          if (Array.isArray(val)) {
+            list = val;
+          } else {
+            list = [{
+              url: process.env.VUE_APP_COS_BASE_URL + val,
+              ossId: val,
+              path: val }];
+          }
           // 然后将数组转为对象数组
           this.fileList = list.map(item => {
-            if (typeof item === "string") {
+            // 此处name使用ossId 防止删除出现重名
-              if (item.indexOf(this.baseUrl) === -1 && !item.startsWith("http")) {
+            item = { name: item.ossId, url: item.url, ossId: item.ossId, path: item.path };
-                item = { name: this.baseUrl + item, url: this.baseUrl + item };
-              } else {
-                item = { name: item, url: item };
-              }
-            }
-            console.log(item)
             return item;
           });
+          console.log(this.fileList)
         } else {
           this.fileList = [];
           return [];
@@ -118,27 +122,6 @@ export default {
     },
   },
   methods: {
-    // 删除图片
-    handleRemove(file, fileList) {
-      const findex = this.fileList.map(f => f.name).indexOf(file.name);
-      if(findex > -1) {
-        this.fileList.splice(findex, 1);
-        this.$emit("input", this.listToString(this.fileList));
-      }
-    },
-    // 上传成功回调
-    handleUploadSuccess(res) {
-      const { data } = res
-      console.log(data);
-      this.uploadList.push({ name: data.fileName, url: data.url });
-      if (this.uploadList.length === this.number) {
-        this.fileList = this.fileList.concat(this.uploadList);
-        this.uploadList = [];
-        this.number = 0;
-        this.$emit("input", this.listToString(this.fileList));
-        this.$modal.closeLoading();
-      }
-    },
     // 上传前loading加载
     handleBeforeUpload(file) {
       let isImg = false;
@@ -147,7 +130,7 @@ export default {
         if (file.name.lastIndexOf(".") > -1) {
           fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
         }
-        isImg = this.fileType.some(type => {
+        isImg = this.fileType.some((type) => {
           if (file.type.indexOf(type) > -1) return true;
           if (fileExtension && fileExtension.indexOf(type) > -1) return true;
           return false;
@@ -174,11 +157,44 @@ export default {
     handleExceed() {
       this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
     },
+    // 上传成功回调
+    handleUploadSuccess(res, file) {
+      if (res.code === 200) {
+        this.uploadList.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId,path: res.data.path });
+        this.uploadedSuccessfully();
+      } else {
+        this.number--;
+        this.$modal.closeLoading();
+        this.$modal.msgError(res.msg);
+        this.$refs.imageUpload.handleRemove(file);
+        this.uploadedSuccessfully();
+      }
+    },
+    // 删除图片
+    handleDelete(file) {
+      const findex = this.fileList.map(f => f.name).indexOf(file.name);
+      if(findex > -1) {
+        let ossId = this.fileList[findex].ossId;
+        // delOss(ossId);
+        this.fileList.splice(findex, 1);
+        this.$emit("input", this.listToString(this.fileList));
+      }
+    },
     // 上传失败
-    handleUploadError() {
+    handleUploadError(res) {
       this.$modal.msgError("上传图片失败，请重试");
       this.$modal.closeLoading();
     },
+    // 上传结束处理
+    uploadedSuccessfully() {
+      if (this.number > 0 && this.uploadList.length === this.number) {
+        this.fileList = this.fileList.concat(this.uploadList);
+        this.uploadList = [];
+        this.number = 0;
+        this.$emit("input", this.listToString(this.fileList));
+        this.$modal.closeLoading();
+      }
+    },
     // 预览
     handlePictureCardPreview(file) {
       this.dialogImageUrl = file.url;
@@ -189,9 +205,13 @@ export default {
       let strs = "";
       separator = separator || ",";
       for (let i in list) {
-        strs += list[i].url.replace(this.baseUrl, "") + separator;
+        if (list[i].path) {
+          strs += list[i].path + separator;
+        }
       }
-      return strs != '' ? strs.substr(0, strs.length - 1) : '';
+      console.log("list",list)
+      console.log(strs);
+      return strs != "" ? strs.substr(0, strs.length - 1) : "";
     }
   }
 };
@@ -199,12 +219,12 @@ export default {
 <style scoped lang="scss">
 // .el-upload--picture-card 控制加号部分
 ::v-deep.hide .el-upload--picture-card {
-  display: none;
+    display: none;
 }
 // 去掉动画效果
 ::v-deep .el-list-enter-active,
 ::v-deep .el-list-leave-active {
-  transition: all 0s;
+    transition: all 0s;
 }
 
 ::v-deep .el-list-enter, .el-list-leave-active {

src/components/ImageUpload3/index.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="component-upload-image">
+    <el-upload
+        multiple
+        :action="uploadImgUrl"
+        list-type="picture-card"
+        :on-success="handleUploadSuccess"
+        :before-upload="handleBeforeUpload"
+        :limit="limit"
+        :on-error="handleUploadError"
+        :on-exceed="handleExceed"
+        name="file"
+        :on-remove="handleRemove"
+        :show-file-list="true"
+        :headers="headers"
+        :file-list="fileList"
+        :on-preview="handlePictureCardPreview"
+        :class="{hide: this.fileList.length >= this.limit}"
+    >
+      <i class="el-icon-plus"></i>
+    </el-upload>
+
+    <!-- 上传提示 -->
+    <div class="el-upload__tip" slot="tip" v-if="showTip">
+      请上传
+      <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
+      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+      的文件
+    </div>
+
+    <el-dialog
+        :visible.sync="dialogVisible"
+        title="预览"
+        width="800"
+        append-to-body
+    >
+      <img
+          :src="dialogImageUrl"
+          style="display: block; max-width: 100%; margin: 0 auto"
+      />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getToken } from "@/utils/auth";
+
+export default {
+  props: {
+    value: [String, Object, Array],
+    // 图片数量限制
+    limit: {
+      type: Number,
+      default: 1,
+    },
+    // 大小限制(MB)
+    fileSize: {
+      type: Number,
+      default: 5,
+    },
+    // 文件类型, 例如['png', 'jpg', 'jpeg']
+    fileType: {
+      type: Array,
+      default: () => ["png", "jpg", "jpeg"],
+    },
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      number: 0,
+      uploadList: [],
+      dialogImageUrl: "",
+      dialogVisible: false,
+      hideUpload: false,
+      baseUrl: process.env.VUE_APP_BASE_API,
+      uploadImgUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传的图片服务器地址
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      fileList: []
+    };
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (val) {
+          // 首先将值转为数组
+          const list = Array.isArray(val) ? val : this.value.split(',');
+          // 然后将数组转为对象数组
+          this.fileList = list.map(item => {
+            if (typeof item === "string") {
+              if (item.indexOf(this.baseUrl) === -1 && !item.startsWith("http")) {
+                item = { name: this.baseUrl + item, url: this.baseUrl + item };
+              } else {
+                item = { name: item, url: item };
+              }
+            }
+            console.log(item)
+            return item;
+          });
+        } else {
+          this.fileList = [];
+          return [];
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
+  computed: {
+    // 是否显示提示
+    showTip() {
+      return this.isShowTip && (this.fileType || this.fileSize);
+    },
+  },
+  methods: {
+    // 删除图片
+    handleRemove(file, fileList) {
+      const findex = this.fileList.map(f => f.name).indexOf(file.name);
+      if(findex > -1) {
+        this.fileList.splice(findex, 1);
+        this.$emit("input", this.listToString(this.fileList));
+      }
+    },
+    // 上传成功回调
+    handleUploadSuccess(res) {
+      const { data } = res
+      console.log(data);
+      this.uploadList.push({ name: data.fileName, url: data.url });
+      if (this.uploadList.length === this.number) {
+        this.fileList = this.fileList.concat(this.uploadList);
+        this.uploadList = [];
+        this.number = 0;
+        this.$emit("input", this.listToString(this.fileList));
+        this.$modal.closeLoading();
+      }
+    },
+    // 上传前loading加载
+    handleBeforeUpload(file) {
+      let isImg = false;
+      if (this.fileType.length) {
+        let fileExtension = "";
+        if (file.name.lastIndexOf(".") > -1) {
+          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
+        }
+        isImg = this.fileType.some(type => {
+          if (file.type.indexOf(type) > -1) return true;
+          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
+          return false;
+        });
+      } else {
+        isImg = file.type.indexOf("image") > -1;
+      }
+
+      if (!isImg) {
+        this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}图片格式文件!`);
+        return false;
+      }
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize;
+        if (!isLt) {
+          this.$modal.msgError(`上传头像图片大小不能超过 ${this.fileSize} MB!`);
+          return false;
+        }
+      }
+      this.$modal.loading("正在上传图片，请稍候...");
+      this.number++;
+    },
+    // 文件个数超出
+    handleExceed() {
+      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
+    },
+    // 上传失败
+    handleUploadError() {
+      this.$modal.msgError("上传图片失败，请重试");
+      this.$modal.closeLoading();
+    },
+    // 预览
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    // 对象转成指定字符串分隔
+    listToString(list, separator) {
+      let strs = "";
+      separator = separator || ",";
+      for (let i in list) {
+        strs += list[i].url.replace(this.baseUrl, "") + separator;
+      }
+      return strs != '' ? strs.substr(0, strs.length - 1) : '';
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+// .el-upload--picture-card 控制加号部分
+::v-deep.hide .el-upload--picture-card {
+  display: none;
+}
+// 去掉动画效果
+::v-deep .el-list-enter-active,
+::v-deep .el-list-leave-active {
+  transition: all 0s;
+}
+
+::v-deep .el-list-enter, .el-list-leave-active {
+  opacity: 0;
+  transform: translateY(0);
+}
+</style>
+

src/views/cai/userGift/index.vue

@@ -55,7 +55,11 @@
       <el-table-column label="赠送手机号" align="center" prop="fromMobile"/>
       <el-table-column label="接受蜜瓜号" align="center" prop="toUsercode"/>
       <el-table-column label="接受手机号" align="center" prop="toMobile"/>
-      <el-table-column label="礼物" align="center" prop="giftImg"/>
+      <el-table-column label="礼物" align="center" prop="giftImg">
+        <template v-slot="scope">
+          <image-preview :src="scope.row.giftImg" :width="50" :height="50"/>
+        </template>
+      </el-table-column>
       <el-table-column label="礼物价格" align="center" prop="giftPrice"/>
       <el-table-column label="礼物数量" align="center" prop="giftCount"/>
       <el-table-column label="礼物总额" align="center" prop="giftAmount"/>