乘风原创程序

  • nodejs使用oss实现图片上传的步骤
  • 2020/9/29 11:31:36
  • 使用阿里的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);
      }
    };
    

    本文地址:https://blog.csdn.net/qq_42446113/article/details/108870333