前端使用el-upload实现单个图片直接上传阿里云OSS

一、完整代码

1、vue组件

2、oss.js文件 

二、实现过程

1、安装依赖

 2、创建oss.js文件

3、添加上传组件 

4、上传图片的回调

5、上传之前的校验 

---

一、完整代码

1、vue组件

<template>
  <div class="container">
    <el-upload
      class="avatar-uploader"
      action=""
      :show-file-list="false"
      :accept="'.img,.png,.jpg,.jpeg'"
      :before-upload="beforeUploadImage"
      :http-request="uploadImage"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { Plus } from "@element-plus/icons-vue";

import * as OSS from "@/utils/oss.js"; // 引入oss.js

const imageUrl = ref(); // 存储图片url值

// 上传图片之前的回调
function beforeUploadImage(file) {
  console.log(file);

  /*
    file: {
      uid 实际上就是时间戳
      lastModified 最后修改时间，时间戳；
      lastModifiedDate：最后修改时间，日期格式；
      name 文件名称，如："girl.png"；
      size 文件大小，如：59402， 单位字节B；
      type 文件类型，如："image/jpeg";
    }
  */
  const isJPEG = file.name.split(".")[1] === "jpeg"; // 判断是否为 .jepg文件
  const isJPG = file.name.split(".")[1] === "jpg"; // 判断是否为 .jpg文件
  const isPNG = file.name.split(".")[1] === "png"; // 判断是否为 .png文件

  const isLt20MB = file.size / 1024 / 1024 < 20; // 判断大小是否超过20MB
  if (!isJPG && !isJPEG && !isPNG) {
    this.$message.error("上传图片只能是 JPEG/JPG/PNG 格式!");
  }
  if (!isLt20MB) {
    this.$message.error("单张图片大小不能超过 20MB!");
  }

  return (isJPEG || isJPG || isPNG) && isLt20MB;
}

// 上传图片的回调函数
function uploadImage(file) {
  const dir = "zyltest"; // 指定bucket中的文件夹上传，如果bucket中没有指定文件夹，则会自动创建；
  const fileName = `${dir}/${file.file.name}`; //定义唯一的文件名，名称重复则会覆盖掉之前的图片；

  OSS.client()
    .put(fileName, file.file)
    .then((res) => {
      console.log("上传成功", res); // 打印查看输出结果
      imageUrl.value = res.url; // 给页面组件绑定返回值的url
    })
    .catch((error)=>{
      console.log('发生错误', error);
    });
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>

2、oss.js文件 

const OSS = require('ali-oss'); // 引入ali-oss依赖

export function client() {  
    const client = new OSS({
        region: '填写Bucket所在地域',
        accessKeyId: '阿里云账号的ID',
        accessKeySecret: '阿里云账号的Secret',
        bucket: '上传到的bucket名称'
    })  
    return client
}

二、实现过程

1、安装依赖

前端上传图片至OSS需要用到ali-oss插件，先安装ali-oss依赖

npm install ali-oss --save

 2、创建oss.js文件

在src下创建utils文件夹，里面新建oss.js文件，用来实例化自己的oss client；

const OSS = require('ali-oss'); // 引入ali-oss依赖

export function client() {  
    const client = new OSS({
        region: '填写Bucket所在地域',
        accessKeyId: '阿里云账号的ID',
        accessKeySecret: '阿里云账号的Secret',
        bucket: '上传到的bucket名称'
    })  
    return client
}

在相应的组件中引入oss.js文件；

import * as OSS from "@/utils/oss.js";  // 引入oss.js

3、添加上传组件 

页面组件添加element-plus中的上传头像组件el-upload；

<template>
  <div class="container">
    <el-upload
      class="avatar-uploader"
      action=""
      :show-file-list="false"
      :accept="'.img,.png,.jpg,.jpeg'"
      :before-upload="beforeUploadImage"
      :http-request="uploadImage"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { Plus } from "@element-plus/icons-vue";

import * as OSS from "@/utils/oss.js"; // 引入oss.js

const imageUrl = ref(); // 存储图片url值

// 上传图片之前的回调
function beforeUploadImage(file) {}

// 上传图片的回调函数
function uploadImage(file) {}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>

效果如下图所示：

 

4、上传图片的回调

// 上传图片回调
function uploadImage(file) {
  const dir = "zyldevices/";
  const fileName = `${dir}device-${file.file.name}`; //定义唯一的文件名

  OSS.client()
    .put(fileName, file.file)
    .then((res) => {
      console.log("上传成功", res);
      deviceForm.value.DeviceImageUrl = res.url;
    })
    .catch((error)=>{
      console.log('发生错误', error);
    });
}

至此，我们已经可以完成上传功能了！

我们可以在页面中看到图片上传组件，点击可选择本地图片，进行上传；

可以看到我们的图片已经成功上传，将返回的url赋值给imageUrl即可显示图片；

在OSS控制台中也可以看到已上传的图片；

5、上传之前的校验 

在图片上传之前，可以校验文件类型是否正确，图片大小是否满足要求等；

// 上传图片之前的回调
function beforeUploadImage(file) {
  console.log(file);

  /*
    file: {
      uid 实际上就是时间戳
      lastModified 最后修改时间，时间戳；
      lastModifiedDate：最后修改时间，日期格式；
      name 文件名称，如："girl.png"；
      size 文件大小，如：59402， 单位字节B；
      type 文件类型，如："image/jpeg";
    }
  */
  const isJPEG = file.name.split(".")[1] === "jpeg"; // 判断是否为 .jepg文件
  const isJPG = file.name.split(".")[1] === "jpg"; // 判断是否为 .jpg文件
  const isPNG = file.name.split(".")[1] === "png"; // 判断是否为 .png文件

  const isLt20MB = file.size / 1024 / 1024 < 20; // 判断大小是否超过20MB
  if (!isJPG && !isJPEG && !isPNG) {
    this.$message.error("上传图片只能是 JPEG/JPG/PNG 格式!");
  }
  if (!isLt20MB) {
    this.$message.error("单张图片大小不能超过 20MB!");
  }

  return (isJPEG || isJPG || isPNG) && isLt20MB;
}

==================================================================

记录一下这个前端必不可少的功能！

每天进步一点点，今天的分享就到这里吧！