fix[litemall-admin]：商品的宣传画廊所指的图片列表。

litemall-admin/src/api/storage.js

@@ -60,3 +60,7 @@ export function deleteStorage(data) {
     data
   })
 }
+
+export function getUploadApi(data) {
+  return process.env.OS_API + '/storage/create'
+}

litemall-admin/src/views/goods/goods.vue

@@ -146,8 +146,10 @@
         </el-form-item>
         
         <el-form-item label="宣传画廊">
-          <el-input v-model="dataForm.gallery"></el-input>
-        </el-form-item>            
+          <el-upload :action='UPLOAD_API' :limit='5' multiple accept=".jpg,.jpeg,.png,.gif" :file-list="galleryFileList" list-type="picture" :on-exceed='uploadOverrun' :on-success="handleGalleryUrl" :on-remove="handleRemove">
+            <el-button size="small" type="primary">点击上传</el-button>
+          </el-upload>
+        </el-form-item>        
         
         <el-form-item label="商品介绍">
           <el-input v-model="dataForm.goodsBrief"></el-input>
@@ -207,7 +209,7 @@
 
 <script>
 import { listGoods, createGoods, updateGoods, deleteGoods } from '@/api/goods'
-import { createStorage } from '@/api/storage'
+import { createStorage, getUploadApi } from '@/api/storage'
 import waves from '@/directive/waves' // 水波纹指令
 import BackToTop from '@/components/BackToTop'
 import Editor from '@tinymce/tinymce-vue'
@@ -219,6 +221,8 @@ export default {
   data() {
     return {
       list: undefined,
+      galleryFileList: [],
+      UPLOAD_API: getUploadApi(),
       total: undefined,
       listLoading: true,
       listQuery: {
@@ -242,7 +246,7 @@ export default {
         goodsBrief: undefined,
         goodsDesc: '',
         keywords: undefined,
-        gallery: undefined,
+        gallery: [],
         categoryId: undefined,
         brandId: undefined
       },
@@ -302,6 +306,7 @@ export default {
       this.getList()
     },
     resetForm() {
+      this.galleryFileList = []
       this.dataForm = {
         id: undefined,
         goodsSn: undefined,
@@ -316,7 +321,7 @@ export default {
         goodsBrief: undefined,
         goodsDesc: '',
         keywords: undefined,
-        gallery: undefined,
+        gallery: [],
         categoryId: undefined,
         brandId: undefined
       }
@@ -324,6 +329,35 @@ export default {
     filterLevel(value, row) {
       return row.level === value
     },
+    uploadOverrun: function() {
+      this.$message({
+        type: 'error',
+        message: '上传文件个数超出限制!最多上传5张图片!'
+      })
+    },
+    handleGalleryUrl(response, file, fileList) {
+      if (response.errno === 0) {
+        this.dataForm.gallery.push(response.data.url)
+      }
+    },
+    handleRemove: function(file, fileList) {
+      for (var i = 0; i < this.dataForm.gallery.length; i++) {
+        // 这里存在两种情况
+        // 1. 如果所删除图片是刚刚上传的图片，那么图片地址是file.response.data.url
+        //    此时的file.url虽然存在，但是是本机地址，而不是远程地址。
+        // 2. 如果所删除图片是后台返回的已有图片，那么图片地址是file.url
+        var url
+        if (file.response === undefined) {
+          url = file.url
+        } else {
+          url = file.response.data.url
+        }
+
+        if (this.dataForm.gallery[i] === url) {
+          this.dataForm.gallery.splice(i, 1)
+        }
+      }
+    },
     handleCreate() {
       this.resetForm()
       this.dialogStatus = 'create'
@@ -350,6 +384,16 @@ export default {
     },
     handleUpdate(row) {
       this.dataForm = Object.assign({}, row)
+      this.galleryFileList = []
+      if (this.dataForm.gallery.length > 0) {
+        for (var i = 0; i < row.gallery.length; i++) {
+          this.galleryFileList.push({
+            name: row.gallery[i].substring(row.gallery[i].lastIndexOf('/') + 1),
+            url: row.gallery[i]
+          })
+        }
+      }
+
       this.dialogStatus = 'update'
       this.dialogFormVisible = true
       this.$nextTick(() => {