其他分享
首页 > 其他分享> > egg上传图片到阿里云服务器

egg上传图片到阿里云服务器

作者:互联网

为了使文章清晰,这篇文章主要写上传图片的代码部分,关于数据库的配置,阿里云服务器的配置,oss对象存储的使用,上传图片在本地文件夹等问题在其他文章将会一一解答。

前端代码部分:

上传组件主要代码如下:



render() {
    const { name = "avatar" } = this.props;
    return (
      <Upload
        name={name}
        className="avatar-uploader"
        showUploadList={false}
        action={`${reqUrl/avatar/saveAvatar?user_id=${user_id}&update_time=${update_time}`}
        beforeUpload={beforeUpload}
        onChange={this.handleChange}
      >
      </Upload>
    );
  }

 

reqUrl :请求接口地址,

beforeUpload : 对图片的一些处理,

handleChange :上传成功后对图片的处理,

页面使用

 
<UploadAvatar name={"cover"} getImageUrl={this.getImageUrl()} /> 

 

 

后端主要代码:

controller下:

const alidata = await ctx.service.avatar.uploadAvatar(); 

 

 

service下:

// 上传头像到阿里云oss
  async uploadAvatar() {
    const { ctx } = this;
    let parts = ctx.multipart({ autoFileds: true });
    let stream;
    const client = new oss({
      accessKeyId: "xxx",
      accessKeySecret: "xxx",
      bucket: "bucketofreactandeggblog",
      region: "oss-cn-beijing",
    });

    while ((stream = await parts()) != null) {
      if (!stream.filename) {
        break;
      }

      let name = new Date() * 1 + path.extname(stream.filename);
      let res = await client
        .putStream(`tests/${name}`, stream)
        .catch(function (err) {
          console.log("error: %j", err);
        });
      return res;
    }
  

 

以上为上传头像前后端的主要代码,详细代码后面可以去我的github上看,稍后我会添加上我的github地址,如果又发现什么不成熟的地方请多多指教。给我留言即可。

标签:const,stream,egg,oss,let,服务器,上传,代码
来源: https://www.cnblogs.com/sinceForever/p/15928622.html