Update picture.vue

1.修改图片路径公式
2.图片改为固定大小预览,点击查看大图
3.上传成功后自动更新列表

vue/src/views/biz/picture.vue

@@ -2,7 +2,7 @@
   <div id="picture">
     <MainHead name="图片" :flag="flag" :terms="terms" :example="example" @query="query(1)">
       <template slot="header">
-        <el-upload class="upload-btn" :action="uploadUrl" :on-error="onError" :on-success="onSuccess" :multiple="false"
+        <el-upload ref="upload" class="upload-btn" :action="uploadUrl" :on-error="onError" :on-success="onSuccess" :multiple="false"
           :show-file-list="false">
           <el-button :size="$store.state.size" type="success" icon="el-icon-upload">
             上传图片
@@ -15,7 +15,7 @@
         <el-result icon="success" :title="item.remark ? item.remark : (index + 1).toString()"
           :subTitle="item.time + '   ' + item.space + '  ' + (item.remark ? item.remark : '')">
           <template slot="icon">
-            <el-image :src="'http://'+ $store.state.conf.host + '/' + item.path">
+            <el-image class="image" :src="$store.state.conf.host + '/' + item.path" :preview-src-list="srcList">
             </el-image>
           </template>
           <template slot="extra">
@@ -29,6 +29,7 @@
     <el-pagination :current-page="example.page" :page-sizes="[10, 20, 50, 100]" :page-size="example.size"
       layout="total, sizes, prev, pager, next, jumper" :total="result.total" @size-change="handleSizeChange"
       @current-change="handleCurrentChange" />
+
   </div>
 </template>
 
@@ -74,6 +75,8 @@
       desc: '结束时间'
     }]
 
+    srcList = [];
+
     example = {
       page: 1,
       size: 20
@@ -95,9 +98,13 @@
       if (page != null) {
         this.example.page = page
       }
-      this.$get(that.url, that.example).then(function(response) {
-        if (response) {
-          that.result = response
+      this.$get(that.url, that.example).then(rsp => {
+        that.srcList = [];
+        if (rsp) {
+          that.result = rsp
+          rsp.rows.forEach(item => {
+            that.srcList.push(that.$store.state.conf.host + '/' + item.path);
+          })
         } else {
           that.result = {
             rows: [],
@@ -173,6 +180,7 @@
       if (response.success == false) {
         that.$showMessage('error', response.message, true);
       } else {
+        that.query();
         that.$showMessage('success', response.message, true)
       }
       this.$refs.upload.clearFiles();
@@ -190,12 +198,17 @@
         }
       }
       if (file) {
+        const that = this;
         this.$confirm('是否要上传剪切板中复制的图片?', '提示', {
           confirmButtonText: '是的',
           cancelButtonText: '不用',
           type: 'warning'
         }).then(() => {
-          this.$upload(file, this.url);
+          this.$upload(file, this.url).then(rsp => {
+            if(rsp){
+              that.query();
+            }
+          });
         }).catch(() => {})
       }
     }
@@ -234,4 +247,9 @@
   .image-list {
     overflow-y: auto;
   }
+
+  .image {
+    height: 120px;
+    width: 200px;
+  }
 </style>