添加单文件上传功能

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="https://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 => {