请问如何获取上传后的图片 url 地址？

[nmgwddj]

如题，我已经成功实现可以将文件上传到 aliyun 服务器上，请问要如何获取到已经上传的图片的 URL 地址？

[nmgwddj]

已经参考其他的代码实现了获取 url 的方法。

https://github.com/CollectionFS/Meteor-CollectionFS/issues/832 S3Url 的实现

1、阿里云后台要将 bucket 的权限设置为公共读

2、客户端实例化 FS.Store.OSS 对象时要指定以下两个属性，与服务端保持一致

bucket: 'skeleton-small',   // bucket 名称
region: 'oss-cn-beijing',  // OSS 服务器的区域

模版中使用

avatar 为从 collection 中遍历得到的图片对象 uploading 为图片上传过程中返回的默认图片 storing 为图片储存过程中返回的默认图片 store 为你需要的图片格式

{{#each avatar}}
  <img src="{{OSSUrl uploading='/resources/item-1.png' storing='/resources/item-1.png' store='avatarsLarge'}}" class="img-responsive" alt="">
{{/each}}

JS 中使用

url 得到的就是已经上传到 aliyun 服务器的图片地址。

var obj = Avatars.findOne({_id: avatarId});
var url = obj.OSSUrl();

参考代码

var avatarStoreLarge = new FS.Store.OSS('avatarsLarge', {
  bucket: 'skeleton-large',
  region: 'oss-cn-beijing',
});

var avatarStoreSmall = new FS.Store.OSS('avatarsSmall', {
  bucket: 'skeleton-small',
  region: 'oss-cn-beijing',
});

FS.File.prototype.OSSUrl = function(options) {
  var self = this;
  options = options || {};
  options = FS.Utility.extend({
    store: null,
    uploading: null,
    storing: null,
  }, options.hash || options);

  if (options.uploading && !self.isUploaded()) {
    return options.uploading;
  }

  if (self.isMounted() && self.copies) {
    var storeName = options.store || self.collection.primaryStore.name;
    var store = storeName ? self.collection.storesLookup[storeName] : self.collection.primaryStore || {};
    var bucket = store.bucket;
    var region = store.region;
    if (!bucket) {
      return null;
    }
    var baseUrl = 'https://' + bucket + '.' + region + '.aliyuncs.com/';
    var fileKey = self.collectionName + '/' + self._id + '-' + self.name();
    return baseUrl + fileKey;
  }
};

Avatars = new FS.Collection('avatars', {
  stores: [avatarStoreSmall, avatarStoreLarge],
  filter: {
    allow: {
      contentTypes: ['image/*']
    }
  }
});

Avatars.allow({
  insert: function (userId, fileObj) {
    return true;
  },
  update: function (userId, fileObj) {
    return true;
  },
  remove: function (userId, fileObj) {
    return true;
  },
  download: function(userId, fileObj) {
    return true
  }
});

[yyang]

谢谢你的回复。

我个人认为这个解决的方法有些复杂，建议用如下方案：

// Preconfigured values
var options = {
  bucket: 'bucket-name',
  region: 'region-name'
};

FS.File.prototype.OSSUrl = function() {
  var key = this.copies[this.collectionName].key;
  return '//' + options.bucket + '.' + options.region +
         '.aliyuncs.com/' + key;
}

返回的URL不要写http:或者https:，这样就可以自动根据origin来判断用http还是https的图片了。

[nmgwddj]

嗯，谢谢指点。 只是参考代码，可能每个人需求不同，大家可以自己根据自己的情况来修改。

[kwunyeung]

@nmgwddj 非常好的 solution!

[boostbob]

这个方法不是reactive的吧? 怎么确保this.copies准备好了，我在 onCreated 使用模板订阅，subscriptionsReady的时候，我发现取图片地址时候，this.copies是undefined，等一下在console里可以正常取到。

[yyang]

现在还有人用meteor？

On Mon, Oct 15, 2018 at 5:28 PM Bob Wang notifications@github.com wrote:

这个方法不是reactive的吧? 怎么确保this.copies准备好了，我在 onCreated 使用模板订阅，subscriptionsReady的时候，我发现取图片地址时候，this.copies是undefined，等一下在console里可以正常取到。

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/yyang/cfs-aliyun/issues/2#issuecomment-429772363, or mute the thread https://github.com/notifications/unsubscribe-auth/AAaF--7rg7yS27anlwESunqLLyBHuaj1ks5ulFUggaJpZM4HNP96 .

[boostbob]

还在用了，做了5-6个项目，现在官网也在维护，最新版本1.8，我换了下取key的，可以用，THX。

let key = `${this.collectionName}/${this._id}-${this.getFileRecord().name()}`;