使用阿里的oss对象存储服务上传图片—nodejs

1、去阿里官网开通oss服务

在这里插入图片描述

2、创建RAM用户的AccessKey ID（https://help.aliyun.com/document_detail/53045.html?spm=a2c4g.11186623.2.19.37043470sHSidi#task968）和AccessKey Secret。

3、使用步骤

1、在项目的目录下创建一个js文件
OSS（options）中的各个配置项说明如下：

[accessKeyId] {String}：通过阿里云控制台创建的AccessKey。
[accessKeySecret] {String}：通过阿里云控制台创建的AccessSecret。
[stsToken] {String}：使用临时授权方式，详情请参见使用 STS 进行临时授权。
[bucket] {String}：通过控制台或PutBucket创建的bucket。

/***************** 阿里云相关 *******************/
const oss = require('ali-oss');

//阿里云 accessKey & Secret
const store =  new oss.Wrapper({
  accessKeyId: 'your access key',
  accessKeySecret: 'your access secret',
  bucket: 'your bucket name',
  region: 'oss-cn-hangzhou'
});
module.exports = store;

2、在使用的地方引入第一步配置的配置文件

const uploader = require('第一步配置文件的路径');

3、页面基于element-ui的图片上传组件

 <!-- 图片上传 -->
              <el-form-item label="封面图" prop="image">
                <div style="margin-top:20px;" class="mypic">
                  <el-upload
                    class="avatar-uploader"
                    action="接口的地址"
                    :show-file-list="false"
                    :on-success="handleSuccess">
                    <img v-if="eventForm.image" :src="eventForm.image" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <div class="tag_size">750*400</div>
                </div>
              </el-form-item>


<script>
import moment from "moment";
import ElOption from "element-ui/packages/select/src/option";

export default {
  components: { ElOption },
  data() {
    return {
      eventForm:{
        image:"",
      }
    };
  },
  mounted: function() {
  },
  methods: {
    handleSuccess(res, file, fileList) {
      this.eventForm.image = res.url;
    }
  }
};
</script>

4、接口

exports.upload = async (req, res, next) => {
  try {
    console.log(__dirname);//当前文件的绝对路径
    //将两个路径序列为绝对路径
    let static_url = path.resolve(__dirname, '../public');
    console.log(static_url);
    //图片存储的本地路径
    let img_url = '指定一个路径';
    //图片远程存储路径
    let img_urlMonth = 'materiels/' + moment().format('YYYY/M/');
    //饿了么文件上传组件传过来的一些图片属性信息
    let img = req.files.file;
    //请求参数
    let data = req.body;
    //图片扩展民
    let extname = path.extname(img.name);
    //上传后的新文件名--uuid+扩展名
    let name = uuid.v4() + extname;
    //文件本地临时存放目录
    let imgAbsPath = static_url + img_url + name;
    //文件远程存储路径
    let imgOssAbsPath = img_urlMonth + name;
    //文件读取流
    let readable = fs.createReadStream(img.path);
    //文件写入流
    let writable = fs.createWriteStream(imgAbsPath);
    //将读取到的字节拷贝到输出流汇总
    readable.pipe(writable);
    console.log('imgOssAbsPath', imgOssAbsPath);
    //上传到阿里的oss对象存储服务
    let resultObject = await uploader.put(imgOssAbsPath, readable);
    //上传成功后删除本地创建的临时存放文件的目录
    await fs.unlink(imgAbsPath, function (err) {
      if (err) {
        throw err;
      }
    });
    if (endsWith(resultObject.name, '.jpg')
      || endsWith(resultObject.name, '.png')
      || endsWith(resultObject.name, '.jpeg')
      || endsWith(resultObject.name, '.gif')) {
      let url = '';
      if (data.width) {
        url = '阿里云oss存储路径' + resultObject.name;
      } else {
        url = '阿里云oss存储路径' + resultObject.name;
      }
      res.json({
        url: url,
        title: name,
        imgName: img.name,
        data: data,
        state: 'SUCCESS'
      });
    } else {
      res.json({
        url: '阿里云存储路径' + resultObject.name,
        title: name,
        name: img.name,
        data: data,
        state: 'SUCCESS'
      });
    }
  } catch (err) {
    next(err);
  }
};