upload/src/pages/home/index.vue

<template>
  <div class="home">
    <div class="image"
         v-for="item,index in imgUrl"
         :key="index">
      <div class="title">图片展示区域：</div>
      <img :src="item"
           class="inner-img" />
      <input type="text"
             class="url-block"
             disabled
             placeholder="默认使用url"
             :value="item">
    </div>
    <el-upload class="upload"
               action=""
               accept=".png,.jpg,.jpeg"
               :on-success="handleSuccess"
               :http-request="uploadFile"
               :show-file-list="false"
               :multiple="false"
               :file-list="fileList">

      <el-button size="small"
                 class="update-button"
                 type="primary">点击上传</el-button>

    </el-upload>

  </div>
</template>

<script>

const OSS = require('ali-oss');

const client = new OSS({

  accessKeyId: 'LTAI5tAmkA2tR9t5hXWm7ru1',  // 查看你自己的阿里云KEY

  accessKeySecret: 'Gy5zuTqh7x6OpKWdKfxZLuQjPEF2vG', // 查看自己的阿里云KEYSECRET

  bucket: 'we-spa', // 你的 OSS bucket 名称

  region: 'oss-cn-shenzhen', // bucket 所在地址

  // cname: true // 开启自定义域名上传

  // endpoint:"file.xxxx.live" // 自己的域名

});

export default {

  props: {

    msg: String

  },

  data () {

    return {

      fileList: [],

      imgUrl: [

      ]

    }

  },

  methods: {

    async uploadFile (options) {

      try {
        let file = options.file; // 拿到 file
        console.log(file.name, 'file.name.substr(0,file.name');
        const size = file.size / 1024
        console.log(size, 'file.size');
        if (size > 2000) {
          this.$notify.warning({
            title: '警告',
            message: '大小必须小于M'
          })
          return
        }
        let fileName = file.name.substr(file.name.lastIndexOf('.'), file.name.length - 1)


        let date = new Date().getTime()

        let fileNames = `${date}${fileName}` // 拼接文件名，保证唯一，这里使用时间戳+原文件名

        // 上传文件,这里是上传到OSS的 uploads文件夹下

        client.put('total_picture/' + fileNames, file).then(res => {

          if (res.res.statusCode === 200) {

            options.onSuccess(res)

          } else {

            options.onError("上传失败")

          }

        })

      } catch (e) {

        options.onError("上传失败")

      }

    },

    // 上传成功回调函数

    handleSuccess (res) {
      if (res) {
        this.imgUrl.push(res.url)

      }

    }

  }

}

</script>
<style>
.home {
  padding: 8px;
  position: relative;
}
.title {
  text-align: left;
  font-size: 13px;
  width: 95%;
  padding-left: 10px;
  background-color: #ffffff;
  color: #999999;
}
.image {
  margin-top: 20px;
  text-align: center;
}
.url-block {
  margin-top: 20px;
  width: 100%;
  height: 50px;
  padding-left: 10px;
  border: 1px solid rgb(15, 15, 16);
  overflow-x: auto;
}
.inner-img {
  max-width: 95%;
  height: auto;
  display: block;
  margin: 10px auto;
}
.el-upload {
  margin-top: 20px;
  width: 100%;
}
.update-button {
  width: 80%;
  height: 40px;
  color: #ffffff;
  background-color: #00a2ff;
  border-radius: 10px;
  margin: 0 auto;
  text-align: center;
}
</style>