element upload上传图片到阿里云

首先安装依赖

cnpm install ali-oss

封装client

若是想减小打包后静态资源大小，可在index.html引入：（然后在client.js里注释掉const OSS = require(‘ali-oss’)）

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

const OSS = require('ali-oss')

export function client(data) {
  // 后端提供数据
  return new OSS({
    region: data.endpoint, // *****.aliyuncs.com
    accessKeyId: data.accessKeyId,
    accessKeySecret: data.accessKeySecret,
    bucket: data.bucketName,
    endpoint: data.endpoint,
    secure: true
  })
}

然后，在vue页面引用，给client传入后台返回的阿里数据

结果如下图：

1、HTML部分

<el-upload
 action=""
 :http-request="Upload"
 :data="Aliyun"
 :multiple="false"
 :show-file-list="true"
 list-type="picture-card"
 :on-preview="handlePictureCardPreview"
 :on-remove="handleRemove"
 :limit="5"
>
 <i class="el-icon-plus" />
</el-upload>
<el-dialog :visible.sync="dialogVisible">
 <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<p style="color: #999;">图片上传限制： 1.最多5张； 2.最大1M</p>

2、JS部分

import { getAliyun, createOrder } from '@/api/order-management'
import { client } from '@/utils/alioss'
export default {
  name: 'Appeal',
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      Aliyun: {}, // 存签名信息
      progress: 0, // 进度条
      imgUrl: [] // 存上传后的图片url
    }
  },
  created() {
    this.getAliyun()
  },
  methods: {
    // 获取阿里云数据
    async getAliyun() {
      const { data } = await getAliyun()
      this.Aliyun = data
    },
    // 上传图片
    Upload(file) {
      const that = this
      // 判断扩展名
      const tmpcnt = file.file.name.lastIndexOf('.')
      const exname = file.file.name.substring(tmpcnt + 1)
      const names = ['jpg', 'jpeg', 'png']
      if (names.indexOf(exname) < 0) {
        this.$message.error('不支持的格式!')
        return
      }
      if (file.size > 1024 * 1024) {
        this.$message.error('图片大小最大1M')
        return
      }
      async function multipartUpload() {
        // const fileName = that.name + file.file.uid
        const fileName = that.Aliyun.objectName + +'/' + Date.now() + '-' + file.file.name
        // fileName = aliyunConfig.objectName+'/'+Date.now()+'-'+file.name //所要上传的文件名拼接 (test/)
        // 定义唯一的文件名，打印出来的uid其实就是时间戳
        // client 是第一步中的 client
        client(that.Aliyun).put(fileName, file.file,
          {
            progress: function(p) { // 获取进度条的值
              console.log(p)
              that.progress = p * 100
            }
          }).then(
          result => {
            // 下面是如果对返回结果再进行处理，根据项目需要
            // console.log(result)
            // that.imgUrl = 'http://' + result.bucket + '.' + that.Aliyun.endpoint + '/' + result.name
            that.dialogImageUrl = result.url
            that.imgUrl.push({
              name: file.file.name,
              url: result.url
            })
            console.log(that.imgUrl)
          }).catch(err => {
          console.log('err:', err)
        })
      }
      multipartUpload()
    },
    // 图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 删除图片
    handleRemove(file, fileList) {
      // console.log(file)
      for (var i in this.imgUrl) {
        if (this.imgUrl[i].name === file.name) {
          this.imgUrl.splice(i, 1)
        }
      }
    }
  }
}
</script>