vue+Element 实现前端调用阿里云oss上传,删除

上传图片和附件这里不做区别；上传的流程都一样；
oss上传下载文档

1、安装包ali-oss
安装命令为npm install ali-oss --save。
如果使用npm遇到网络问题，建议使用淘宝提供的npm镜像cnpm。

2、新建oss.js文件，封装使用oss （需要安装包ali-oss）

const OSS = require('ali-oss')
const OSSConfig = {
  uploadHost: 'http://ispider-oss.oss-cn*************', // OSS上传地址
  ossParams: {
    // yourregion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
    region: 'yourregion',
    // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
    accessKeyId: 'L*****************d',
    accessKeySecret: 'W********************o',
    // 填写Bucket名称（阿里云上的Bucket，也就是上传地址）。
    bucket: 'oss'
  }
}
// 上传
function uploadOSS (fileName, file) {
  return new Promise(async (resolve, reject) => {
    // const fileName = `${random_string(6)}_${file.name}`
    const client = new OSS({
      region: OSSConfig.ossParams.region,
      accessKeyId: OSSConfig.ossParams.accessKeyId,
      accessKeySecret: OSSConfig.ossParams.accessKeySecret,
      bucket: OSSConfig.ossParams.bucket
    })
    const res = await client.multipartUpload(fileName, file)
    // resolve(res)
    // 或者返回如下：
    resolve({
      fileUrl: `${OSSConfig.uploadHost}/${fileName}`,
      fileName: file.name
    })
  })
}
// 删除
function deleteOSS (fileName) {
  return new Promise(async (resolve, reject) => {
    // const fileName = `${random_string(6)}_${file.name}`
    const client = new OSS({
      region: OSSConfig.ossParams.region,
      accessKeyId: OSSConfig.ossParams.accessKeyId,
      accessKeySecret: OSSConfig.ossParams.accessKeySecret,
      bucket: OSSConfig.ossParams.bucket
    })
    client.useBucket("oss");
    const res = await client.delete(fileName)
    resolve(res)
  })
}
export { uploadOSS, deleteOSS }

3、页面中使用oss.js
这里是对elementUI的上传组件二次封装，里面不使用组件的action上传图片和附件，使用oss上传方式

<template>
  <div class="upload-file">
    <el-upload
      ref="fileUpload"
      action=""
      list-type="picture-card"
      :show-file-list="false"
      :http-request="fnUploadRequest"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="handleUpload"
    >
      <slot></slot>
    </el-upload>
  </div>
</template>

<script>
import { uploadOSS } from '@/utils/oss';

export default {
  name: "index",
  data() {
    return {};
  },
  methods: {
       handleUpload(file, fileList){
     console.log(file, fileList);
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = testmsg === 'xlsx' || testmsg === 'xls' || testmsg === 'docx' || testmsg === 'doc'
        || testmsg === 'pdf' || testmsg === 'zip' || testmsg === 'rar' || testmsg === 'ppt' || testmsg === 'txt' || testmsg === 'jpeg' || testmsg === 'jpg' || testmsg === 'png'

      const isLimit100M = file.size / 1024 / 1024 < 100
      var bool = false;
      if(extension && isLimit100M){
        bool = true;
      } else {
        bool = false;
      }
      if(!extension) {
        this.$message.error('请选择文件类型！');
        return bool;
      }
      if(!isLimit100M) {
        this.$message.error('上传失败，不能超过100M！');
        return bool;
      }
      return bool;
    },
    handleSuccess(res) {
      // console.log(res);
      if (res) {
        this.$emit('fileData', res)
        this.$message.success("上传成功！");
      }
    },
    handleError(err){
      this.$message.error('上传失败！');
    },
    // 上传图片
    async fnUploadRequest(options) {
      try {
        // console.log(options);
        let file = options.file; // 拿到 file
        let res = await uploadOSS('doorLockDemo/'+file.name,file)
        console.log(res);
        // 返回数据
        this.$emit("fileData", res);
        this.$message.success("上传成功！");
        this.fileList.push({
          name: res.fileName,
          url: res.fileUrl
        });
        console.log(this.fileList)
      } catch (e) {
        this.$message.error('上传失败！');
      }
    },
    // 删除
     removeFileListIdx(list,item, index){
      deleteOSS('doorLockDemo/'+item.name).then(res=>{
        list.splice(index, 1);
        this.$message({
          message: "删除成功",
          type: "success",
        });
      })

    },

  }
   
};
</script>