上传图片到阿里云

要根据后台返回的是不是这种形式的数据 以及后台的传参需求。否则可能上传不成功

在components中新建一个组件 upload.vue

upload.vue组件中

<template>
  <el-upload
    v-loading="loading"
    :class="className"
    :http-request="Upload"
    action=""
    :show-file-list="showFileList"
    :before-upload="beforeUpload"
  >
    <slot />
  </el-upload>
</template>

<script>
//import { saBs } from '@/utils/request'
import axios from 'axios'
import { getUploadToken } from '@/api/svrmanage/apply'
export default {
  props: {
    className: String,
    imgWidth: String,
    imgHeight: String,
    showFileList: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      pictureList: [],
      loading: false
    }
  },
  watch: {
    fileList() {
      // this.pictureList = this.fileList
    }
  },
  created() {
    // this.pictureList = this.fileList
  },
  methods: {
    Upload(file) {
      const _this = this
      this.loading = true
      // 获取Img服务器信息
      // 要根据你们后台的返回数据进行拼接 以下是我项目中的
      //后台接口getUploadToken() 接口返回数据  图片展示进行 host + '/' + fileName
        //accessid: "LTAIDQhPlHf4UQLs"
        //dir: "merchant/gl_24_ads/"
        //expire: "1586504494"
        //host: "https://gl365dev.oss-cn-shenzhen.aliyuncs.com"
        //policy: "eyJleHBpcmF0aW9uIjoiMjAyMC0wNC0xMFQwNzo0MTozNC41MjVaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF0sWyJzdGFydHMtd2l0aCIsIiRrZXkiLCJtZXJjaGFudC9nbF8yNF9hZHMvIl1dfQ=="
        //signature: "UdJ1I2ZsnvgNq9KcOszAUg69xE0="
     getUploadToken().then(res => {
        // const Data = JSON.stringify(res.opd)
        // localStorage.setItem('imgData', Data)
        const data = res.opd
        const date = new Date()
        var request = new FormData()
        const host = data.host
        // append相当于打开阿里云通道  这个相当于是你要上传时的通道数据
        const fileName = data.dir + data.expire + '.png'
        request.append('OSSAccessKeyId', data.accessid)// Bucket 拥有者的Access Key Id。
        request.append('policy', data.policy)// policy规定了请求的表单域的合法性
        request.append('Signature', data.signature)// 根据Access Key Secret和policy计算的签名信息，OSS验证该签名信息从而验证该Post请求的合法性
        request.append('key', fileName)// 文件名字，可设置路径
        request.append('success_action_status', '200')// 让服务端返回200,不然，默认会返回204
        request.append('file', file.file)// 需要上传的文件 file
        axios({
          method: 'post',
          url: data.host,
          data: request
        }).then(res => {
          return res.data
        }).then(rst => {
          _this.loading = false
          _this.$emit('handle-success', host + '/' +fileName)
          _this.$emit('on-preview', host + '/' +fileName)
        }).catch(() => {
          _this.loading = false
        })
      }).catch(res => {
        console.log('res>>>>>>>', res)
      })
    },
    beforeUpload(file) {
      const _this = this
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const img = new Image()
      img.src = file
      const extension = testmsg.toLocaleLowerCase() === 'jpg'
      const extension2 = testmsg.toLocaleLowerCase() === 'png'
      const extension3 = testmsg.toLocaleLowerCase() === 'gif'
      let isSize
      const isLt2M = file.size / 1024 / 1024 < 10
      if (this.imgWidth && this.imgHeight) {
        isSize = new Promise(function(resolve, reject) {
          const _URL = window.URL || window.webkitURL
          const img = new Image()
          img.onload = function() {
            const valid = img.width == _this.imgWidth && img.height == _this.imgHeight
            valid ? resolve() : reject()
          }
          img.src = _URL.createObjectURL(file)
        }).then(() => {
          return file
        }, () => {
          this.$message.error(`上传的图片必须是等于${_this.imgWidth} * ${_this.imgHeight}!`)
          return Promise.reject()
        })
      }
      if (!extension && !extension2) {
        this.$message({
          message: '上传文件只能是 jpg、png、gif格式!',
          type: 'warning'
        })
      }
      if (!isLt2M) {
        this.$message({
          message: '上传文件大小不能超过 10MB!',
          type: 'warning'
        })
      }
      return (extension || extension2 || extension3) && isLt2M && isSize
    }
  }
}
</script>

<style>

</style>

然后引用组件进行使用

index.vue 上传图片

<template>
  <div class="app-container svrmanage">
      <upload class-name="avatar-uploader" @handle-success="handleAvatarSuccess">
        <img v-if="applyUrl" :src="applyUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </upload>
      <div slot="footer">
        <el-button @click="SubmitFlowwater">提交申请</el-button>
      </div>
  </div>
</template>

<script>
import Upload from '@/components/upload'
export default {
  components: {
    Upload
  },
  data() {
    return {
      applyUrl: '',
    };
  },
  created() {},
  methods: {
    handleAvatarSuccess(file) {
      this.applyUrl =  file
    },
    // 修改流水等级
    SubmitFlowwater() {
      // 请求接口 this.applyUrl 就是传给后台的url参数
    }
  }
};
</script>