优化图片上传新增加可以上传多张图

ZR.Admin.WebApi/Controllers/CommonController.cs

@@ -99,23 +99,28 @@ namespace ZR.Admin.WebApi.Controllers
             }
 
             string accessPath = $"{OptionsSetting.Upload.UploadUrl}/{FileUtil.GetdirPath("uploads").Replace("\\", " /")}{fileName}";
-            return ToResponse(ResultCode.SUCCESS, accessPath);
+            return ToResponse(ResultCode.SUCCESS, new
+            {
+                url = accessPath,
+                fileName
+            });
         }
 
         /// <summary>
         /// 存储文件到阿里云
         /// </summary>
         /// <param name="formFile"></param>
+        /// <param name="fileDir">上传文件夹路径</param>
         /// <returns></returns>
         [HttpPost]
         [Verify]
         [ActionPermissionFilter(Permission = "system")]
-        public IActionResult UploadFileAliyun([FromForm(Name = "file")] IFormFile formFile)
+        public IActionResult UploadFileAliyun([FromForm(Name = "file")] IFormFile formFile, string fileDir = "")
         {
             if (formFile == null) throw new CustomException(ResultCode.PARAM_ERROR, "上传文件不能为空");
             string fileExt = Path.GetExtension(formFile.FileName);
             string[] AllowedFileExtensions = new string[] { ".jpg", ".gif", ".png", ".jpeg", ".webp", ".svga", ".xls" };
-            int MaxContentLength = 1024 * 1024 * 4;
+            int MaxContentLength = 1024 * 1024 * 5;
 
             if (!AllowedFileExtensions.Contains(fileExt))
             {
@@ -126,9 +131,13 @@ namespace ZR.Admin.WebApi.Controllers
             {
                 return ToResponse(ResultCode.CUSTOM_ERROR, "上传文件过大，不能超过 " + (MaxContentLength / 1024).ToString() + " MB");
             }
-            (bool, string) result = SysFileService.SaveFile("", formFile);
+            (bool, string, string) result = SysFileService.SaveFile(fileDir, formFile);
 
-            return ToResponse(ResultCode.SUCCESS, result.Item2);
+            return ToResponse(ResultCode.SUCCESS, new
+            {
+                url = result.Item2,
+                fileName = result.Item3
+            });
         }
         #endregion
     }

ZR.Admin.WebApi/wwwroot/CodeGenTemplate/TplVueApi.txt

@@ -59,7 +59,7 @@ export function del${genTable.BusinessName}(pid) {
 }
 
 // 导出${genTable.functionName}
-export function export${replaceDto.ModelTypeName}(query) {
+export function export${genTable.BusinessName}(query) {
   return request({
     url: '${genTable.ModuleName}/${replaceDto.ModelTypeName}/export',
     method: 'get',

ZR.Service/System/IService/ISysFileService.cs

@@ -5,7 +5,13 @@ namespace ZR.Service.System.IService
 {
     public interface ISysFileService
     {
-        (bool, string) SaveFile(string picdir, IFormFile formFile);
+        /// <summary>
+        /// 上传文件
+        /// </summary>
+        /// <param name="picdir"></param>
+        /// <param name="formFile"></param>
+        /// <returns>结果、地址、文件名</returns>
+        (bool, string, string) SaveFile(string picdir, IFormFile formFile);
 
         /// <summary>
         /// 按时间来创建文件夹

ZR.Service/System/SysFileService.cs

@@ -25,7 +25,7 @@ namespace ZR.Service.System
         /// <param name="picdir"></param>
         /// <param name="formFile"></param>
         /// <returns></returns>
-        public (bool, string) SaveFile(string picdir, IFormFile formFile)
+        public (bool, string, string) SaveFile(string picdir, IFormFile formFile)
         {
             // eg: idcard/2020/08/18
             string dir = GetdirPath(picdir.ToString());
@@ -36,11 +36,7 @@ namespace ZR.Service.System
 
             HttpStatusCode statusCode = AliyunOssHelper.PutObjectFromFile(formFile.OpenReadStream(), Path.Combine(dir, fileName));
 
-            if (statusCode == HttpStatusCode.OK)
+            return (statusCode == HttpStatusCode.OK, webUrl, fileName);
-            {
-                return (true, webUrl);
-            }
-            return (false, "");
         }
 
         public string GetdirPath(string path = "")

ZR.Vue/src/components/UploadImage/index.vue

@@ -1,10 +1,21 @@
 <template>
   <div class="component-upload-image">
-    <el-upload :action="uploadImgUrl" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload" :on-error="handleUploadError" name="file"
+    <el-upload list-type="picture-card" :action="uploadImgUrl" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload"
-      :show-file-list="false" :headers="headers" style="display: inline-block; vertical-align: top">
+      :on-exceed="handleExceed" :on-remove="handleRemove" :on-error="handleUploadError" name="file" :show-file-list="true" :limit="limit"
-      <el-image v-if="imageUrl" :src="imageUrl" class="icon" />
+      :file-list="fileList" :on-preview="handlePictureCardPreview" :class="{hide: this.fileList.length >= this.limit}" :headers="headers">
-      <i v-else class="el-icon-plus uploader-icon"></i>
+      <i class="el-icon-plus"></i>
+
+      <!-- 上传提示 -->
+      <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-upload>
+    <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>
 
@@ -14,6 +25,11 @@ import { getToken } from "@/utils/auth";
 export default {
   props: {
     value: [String],
+    // 图片数量限制
+    limit: {
+      type: Number,
+      default: 1,
+    },
     column: [String],
     // 上传地址
     uploadUrl: {
@@ -32,14 +48,23 @@ export default {
     },
     //显示手动输入地址
     showInput: false,
+    // 是否显示提示
+    isShowTip: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
+      dialogImageUrl: "",
+      dialogVisible: false,
+      hideUpload: false,
       uploadImgUrl: process.env.VUE_APP_BASE_API + this.uploadUrl, // 上传的图片服务器地址
       headers: {
         Authorization: "Bearer " + getToken(),
       },
       imageUrl: "",
+      fileList: [],
     };
   },
   watch: {
@@ -49,22 +74,49 @@ export default {
       deep: true,
       handler: function (val) {
         if (val) {
-          this.imageUrl = 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 = { name: this.baseUrl + item, url: this.baseUrl + item };
+              // } else {
+              item = { name: item, url: item };
+              // }
+            }
+            return item;
+          });
         } else {
-          this.imageUrl = "";
+          this.fileList = [];
+          return [];
         }
       },
     },
   },
+  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.column, this.listToString(this.fileList));
+      }
+    },
+    //上传成功回调
     handleUploadSuccess(res) {
-      this.$emit(`input`, res, this.column);
+      this.fileList.push({ name: res.data.fileName, url: res.data.url });
-      this.imageUrl = res.data;
+      this.$emit(`input`, this.column, this.listToString(this.fileList));
       this.loading.close();
     },
     // 上传前loading加载
     handleBeforeUpload(file) {
-      console.log(file);
       let isImg = false;
       if (this.fileType.length) {
         let fileExtension = "";
@@ -99,6 +151,24 @@ export default {
         background: "rgba(0, 0, 0, 0.7)",
       });
     },
+    // 文件个数超出
+    handleExceed() {
+      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
+    },
+    // 预览
+    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) : '';
+    },
     handleUploadError() {
       this.$message({
         type: "error",
@@ -111,8 +181,18 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.avatar {
+::v-deep.hide .el-upload--picture-card {
-  width: 100%;
+  display: none;
-  height: 100%;
+}
+// 去掉动画效果
+::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>

ZR.Vue/src/views/tool/gen/editTable.vue

@@ -1,6 +1,6 @@
 <template>
   <el-card>
-    <el-tabs v-model="activeName">
+    <el-tabs v-model="activeName" tab-position="top">
       <el-tab-pane label="基本信息" name="basic">
         <basic-info-form ref="basicInfo" :info="info" />
       </el-tab-pane>