VUE 实现element upload上传图片到阿里云

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
 })
}

<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="/UploadFiles/2021-04-02/dialogImageUrl">

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>


补充知识：vue-cli项目中，配合element_ui来实现上传图片与视频到oss上。


<template>
  <div class="basicInfo">
   <el-upload class="avatar-content"
    v-loading="fileLoading"
    accept="image/*"
    drag action="https://zxcity-app.oss-cn-hangzhou.aliyuncs.com"
    :show-file-list="false"
    :data="ossParams"
    :before-upload="checkParams"
    :on-progress="progress"
    :on-error="uploadErr"
    :on-success="uploadSuccess"
    :on-remove="fileListRemove"
    multiple
    >
   </el-upload>
   <div v-for="(item,index) in fileList" :key="index" class="imgDiv">
    <img :src="/UploadFiles/2021-04-02/item.imgUrl">

以上这篇VUE 实现element upload上传图片到阿里云就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。