feat: 完善商品添加图片上传

src/views/business/goods/add.vue

@@ -10,7 +10,8 @@
         </el-col>
         <el-col :span="23">
           <el-form-item label="商品主图:" prop="picUrl">
-            <!-- <Upload v-model="addData.picUrl" :limit="1" :type="4" :beforeUpload="beforeUpload" /> -->
+            <Upload v-model="mainPicUrl" :limit="8" />
+            <br>
             <div class="tip">支持jpg、png格式上传，建议使用尺寸800x800像素以上、大小不超过1M的正方形图片；</div>
           </el-form-item>
         </el-col>
@@ -161,7 +162,7 @@
           <el-input-number v-model="productForm.quantity"/>
         </el-form-item>
         <el-form-item label="商品图片:" prop="picUrl">
-          <Upload v-model="productForm.picUrl" :limit="1" :type="4" />
+          <Upload :value="productForm.picUrl ? [{ fileName: productForm.picUrl }] : []" @input="productForm.picUrl = $event[0] ? $event[0].fileName : ''" :limit="1" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -179,12 +180,11 @@
   </div>
 </template>
 <script>
-import Draggable from 'vuedraggable'
+import Upload from '@/components/ImageUpload'
 import { getGoodsDetail, addGoods } from '@/api/business/goods'
-
 export default {
   components: {
-    Draggable
+    Upload
   },
   data() {
     return {
@@ -210,6 +210,18 @@ export default {
   computed: {
     multipleSpec() {
       return this.addData.multiSku === 1
+    },
+    mainPicUrl: {
+      get() {
+        return this.addData.picUrl ? this.addData.picUrl.split(',').map(item => {
+          return {
+            fileName: item
+          }
+        }) : []
+      },
+      set(val) {
+        this.addData.picUrl = val.map(item => { return item.fileName }).toString()
+      }
     }
   },
   created() {