vue+node.js操作阿里云OSS，上传和删除文件

 效果图 

一、上传文件

 

 

二、删除文件

第一步，引入依赖

npm install ali-oss --save 

第二步，写OSS配置文件（server/oss.js） 

这里需要在阿里云开通子账号，赋予相应OSS权限，并记录相应的Id和Secret，用于操作 bucket，这里不细说了，建议自行百度。

// 阿里云oss存储
const OSS = require('ali-oss')

const client = new OSS({
  // region填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
  region: 'oss-cn-hangzhou',
  // 阿里云账号RAM用户进行API访问或日常运维。
  accessKeyId: '你自己的accessKeyId',
  accessKeySecret: '你自己的accessKeySecret',
  bucket: '你自己的bucket'
})

export {client}

第三步，写一个上传的组件（components/uploadimage.vue）

这里引用了element ui组件样式，实现了选择图片后先先预览加载，等点击确定按钮后，再上传图片到阿里云OSS。 

第四步，实现上传图片

主要是依靠OSS对象的put(url,file)方法，前面是存储到bucket的路径及名称，后者是该文件的file类型数据。 

第五步，实现删除图片

依靠OSS的delete(url)方法，删除文件，url示例： upload/2023-02/b35aae063be1e198207bc8dc778.jpg。