添加单文件上传功能

src/api/oss.js

@@ -0,0 +1,7 @@
+import request from '@/utils/request'
+export function policy() {
+  return request({
+    url:'/aliyun/oss/policy',
+    method:'get',
+  })
+}

src/components/Upload/singleUpload.vue

@@ -0,0 +1,107 @@
+<template> 
+  <div>
+    <el-upload
+      action="http://macro-oss.oss-cn-shenzhen.aliyuncs.com"
+      :data="dataObj"
+      list-type="picture"
+      :multiple="false" :show-file-list="showFileList"
+      :file-list="fileList"
+      :before-upload="beforeUpload"
+      :on-remove="handleRemove"
+      :on-success="handleUploadSuccess"
+      :on-preview="handlePreview">
+      <el-button size="small" type="primary">点击上传</el-button>
+      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="fileList[0].url" alt="">
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import {policy} from '@/api/oss'
+
+  export default {
+    name: 'singleUpload',
+    props: {
+      value: String
+    },
+    computed: {
+      imageUrl() {
+        return this.value;
+      },
+      imageName() {
+        if (this.value != null && this.value !== '') {
+          return this.value.substr(this.value.lastIndexOf("/") + 1);
+        } else {
+          return null;
+        }
+      },
+      fileList() {
+        return [{
+          name: this.imageName,
+          url: this.imageUrl
+        }]
+      },
+      showFileList: {
+        get: function () {
+          return this.value !== null && this.value !== '';
+        },
+        set: function (newValue) {
+        }
+      }
+    },
+    data() {
+      return {
+        dataObj: {
+          policy: '',
+          signature: '',
+          key: '',
+          ossaccessKeyId: '',
+          dir: '',
+          host: ''
+        },
+        dialogVisible: false
+      };
+    },
+    methods: {
+      emitInput(val) {
+        this.$emit('input', val)
+      },
+      handleRemove(file, fileList) {
+        this.emitInput('');
+      },
+      handlePreview(file) {
+        this.dialogVisible = true;
+      },
+      beforeUpload(file) {
+        let _self = this;
+        return new Promise((resolve, reject) => {
+          policy().then(response => {
+            _self.dataObj.policy = response.data.policy;
+            _self.dataObj.signature = response.data.signature;
+            _self.dataObj.ossaccessKeyId = response.data.accessKeyId;
+            _self.dataObj.key = response.data.dir + '/${filename}';
+            _self.dataObj.dir = response.data.dir;
+            _self.dataObj.host = response.data.host;
+            resolve(true)
+          }).catch(err => {
+            console.log(err)
+            reject(false)
+          })
+        })
+      },
+      handleUploadSuccess(res, file) {
+        this.showFileList = true;
+        this.fileList.pop();
+        this.fileList.push({name: file.name, url: this.dataObj.host + '/' + this.dataObj.dir + '/' + file.name});
+        this.emitInput(this.fileList[0].url);
+      }
+    }
+  }
+</script>
+<style>
+
+</style>
+
+

src/views/pms/brand/components/BrandDetail.vue

@@ -4,21 +4,21 @@
       <el-form-item label="品牌名称：" prop="name">
         <el-input v-model="brand.name"></el-input>
       </el-form-item>
-      <el-form-item label="品牌首字母：">
+      <el-form-item label="品牌首字母：" property="">
         <el-input v-model="brand.firstLetter"></el-input>
       </el-form-item>
       <el-form-item label="品牌LOGO：" prop="logo">
-        <el-input v-model="brand.logo"></el-input>
+        <single-upload v-model="brand.logo"></single-upload>
       </el-form-item>
       <el-form-item label="品牌专区大图：">
-        <el-input v-model="brand.bigPic"></el-input>
+        <single-upload v-model="brand.bigPic"></single-upload>
       </el-form-item>
       <el-form-item label="品牌故事：">
         <el-input
           placeholder="请输入内容"
           type="textarea"
           v-model="brand.brandStory"
-          autosize="true"></el-input>
+          :autosize="true"></el-input>
       </el-form-item>
       <el-form-item label="排序：" prop="sort">
         <el-input v-model.number="brand.sort"></el-input>
@@ -37,16 +37,18 @@
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit('brandFrom')">提交</el-button>
-        <el-button v-if="!isEdit" @click="resetForm('brandFrom')">重置</el-button>
+        <!--<el-button v-if="!isEdit" @click="resetForm('brandFrom')">重置</el-button>-->
       </el-form-item>
     </el-form>
   </div>
 </template>
 <script>
   import {createBrand, getBrand, updateBrand} from '@/api/brand'
+  import SingleUpload from '@/components/Upload/singleUpload'
 
   export default {
     name: 'BrandDetail',
+    components:{SingleUpload},
     props: {
       isEdit: {
         type: Boolean,
@@ -75,7 +77,7 @@
           ],
           sort: [
             {type: 'number', message: '排序必须为数字'}
-          ]
+          ],
         }
       }
     },
@@ -103,6 +105,7 @@
                     type: 'success',
                     duration:1000
                   });
+                  this.$router.push({path: '/pms/brand'});
                 });
               } else {
                 createBrand(this.brand).then(response => {