使用cloudinary API我可以通过GET以下URL 获取图像列表:
https://API_KEY:API_SECRET@api.cloudinary.com/v1_1/CLOUD_NAME/resources/image/upload
但是,从客户端JavaScript使用此方法会暴露我的帐户的API密钥和密钥.
似乎可以在不暴露我的帐户凭据的情况下获取图像列表.
我查看了Cloudinary AngularJS客户端,它有一个示例项目,可以在帐户中实现照片的幻灯片放映.据我所知,这个项目使用以下行来获取cloudinary帐户中的照片列表
var url = $.cloudinary.url('myphotoalbum', {format: 'json', type: 'list'});
但我不能接到这个电话来回报任何东西.
该cloudinary jQuery的文档不描述语法$.cloudinary.url(); 我发现的唯一资源是Cloudinary JQuery Github Page,它说明了这一点
$.cloudinary.url(public_id, options) // Returns a cloudinary URL based on your on your configuration and the given options.
什么是public_id？有什么options？
使用Cloudinary及其Carrierwave插件,我可以在我的视图中编写一个表单,将图像上传到他们的云并将其绑定到名为的模型属性picture,如下所示:
<%= form_for(@post) do |post_form| %>
<%= post_form.hidden_field(:picture_cache) %>
<%= post_form.file_field(:picture) %>
<% end %>
这有效.但我无法弄清楚如何将属性绑定到模型,同时遵循他们在Rails中直接上传的文档.他们的示例使用未绑定到模型的form_tag:
<%= form_tag(some_path, :method => :post) do %>
<%= cl_image_upload_tag(:image_id) %>
...
<%= end %>
我正在寻找一些类似的例子<%= post_form.some_upload_method(:picture) %>.有没有其他人这样做直接上传他们的模型,知道我在找什么？
我是keystone的新手,我正在尝试部署一个简单的网站模板来熟悉这项技术,我已经下载了所有的necassary模块,并创建了一个包含所有依赖项的keystone.js文件和package.json文件.但是,当我尝试在终端中运行keystone.js时,我得到以下内容:
Error: Invalid Configuration
CloudinaryImage fields (Gallery.heroImage) require the "cloudinary config" option to be set.
See http://keystonejs.com/docs/configuration/#cloudinary for more information.
我已经使用cloudinary建立了一个帐户并使用了npm install来确保它安装在系统中,但显然无法找到配置.我假设有一个简单的解决方案,我只需要将我的configuartion字段放在代码的正确位置,但我似乎无法找到有关在何处插入我的帐户详细信息的任何说明.任何帮助将不胜感激,如果我省略了任何重要的代码,请告诉我.
keystone.js:
require('dotenv').load();
// Require keystone
var keystone = require('keystone'),
handlebars = require('express3-handlebars');
// Initialise Keystone with your project's configuration.
// See http://keystonejs.com/guide/config for available options
// and documentation.
keystone.init({
'name': 'Tech Website',
'brand': 'Tech Website',
'less': 'public',
'static': 'public',
'favicon': 'public/favicon.ico',
'views': 'templates/views',
'view engine': 'hbs',
'custom engine': handlebars.create({
layoutsDir: 'templates/views/layouts',
partialsDir: 'templates/views/partials',
defaultLayout: 'default',
helpers: new require('./templates/views/helpers')(), …我正在尝试使用Lepozepo/cloudinary上传照片
这是我的服务器和客户端配置
服务器:
Cloudinary.config({
cloud_name: '*****',
api_key: '******',
api_secret: '********'
});
客户:
$.cloudinary.config({
cloud_name: "*******"
});
我试图用表格上传图片
HTML表单代码:
<form>
<input type="file" id="userimage" name="userimage"/>
<button type="submit">Upload</button>
</form>
这是我的这个模板的事件
Template.signup.events({
// Submit signup form event
'submit form': function(e, t){
// Prevent default actions
e.preventDefault();
var file = $('#userimage')[0].files[0];
console.log(file)
Cloudinary.upload(file, function(err, res) {
console.log("Upload Error: " + err);
console.log("Upload Result: " + res);
});
}
});
当我点击上传按钮没有任何反应时,我只是出错了
error: uncaught TypeError: Failed to execute 'readAsDataURL' on `'FileReader': parameter 1 is not of type …我有一个名为 Tile 的模型，它有附件：
has_attachment :image_attachment
我可以cl_image_tag @tile.image_attachment.path用来显示 img 标签，但我只想获得完整的 URL 嵌入是内联样式的背景图像，有没有办法获得完整的 URL？
``@tile.image_attachment.path 返回
v1458814322/bgo1zuv4kji17f58x5m5.jpg
我在反应上传图像时遇到问题。我使用 axios 进行 api 请求，使用 multer 和 cloudinary 进行文件上传。
更新： 在我的依赖项中： "axios": "^0.19.0"
我的 .js 文件中所需的依赖项： import axios from 'axios';
图像上传已经在我的后端使用 Express 工作了。但在反应中仍然不起作用。我已经检查了一切，看起来没问题。下面是代码：
const [text, setText] = useState('');
const [image, setImage] = useState([]);
const onSubmit = async e => {
e.preventDefault();
let data = new FormData();
console.log(image + ' ' + 'this is image pathname')
data.append('image', image);
axios.post('/api/posts/image', data)
.then(res => {
console.log(res.data + 'this is data after api call');
})
.catch(err => console.log(err));
};
return (
<Fragment>
<form …设置：
带有帖子的博客，使用 Laravel 构建，其中：
因此总共有 3000 张图像*需要存储（我猜是调整大小）、呈现等。
从长远来看，这是理想的数量，我并不是在寻找“可扩展”的解决方案，因为不会出现疯狂的指数增长。
*实际上，目前它较少，并且我认为对于这些数量的媒体文件来说，它是 1000/1500/2000 还是 3000 并不重要。如果这是错误的，请纠正我。
需要注意的一些额外事项：
因此，困境在于将所有图像本地存储在 Storage 文件夹中（使用某些 Laravel 包操作图像）。另一种可能性是 cloudinary，我对此不太了解，只是它能够存储/操作/备份/使用他们的 api 来呈现我存储在那里的图像。
如果我选择在本地进行 - 在本地存储用户上传的图像是否安全？如何确保它不是伪装成图像文件的恶意软件？
如此大量的图像/内容在本地存储时是否会导致共享主机的性能问题？
使用 cloudinary 对我来说有什么好处？
谢谢。
世界！
实施Cloudinary 的 Active Storage Integration 后，很容易让它以一种形式工作。
我们只需要添加到我们simple_form_for的
<%= f.input :photo, as: :file %>
但是，如果我们想使用Cloudinary Upload Widget，则没有直接的方法将此文件添加到form.
我尝试过的是：1-让小部件上传图片；2-使用上传图片的url更新隐藏输入的值；3-在控制器中，创建模型时，下载图片并将其附加到模型：
<%= f.input :photo, as: :file %>
它有效，但它上传了两次相同的图片，而且 - 恕我直言 - 效率极低。
有任何想法吗？
谢谢！
祝你好运，玩得开心！
我将通过说这可能正在接近这个错误来作为序言.我要做的是使用data-属性将URL转换为JS .
目前,我正在使用以下方法生成图片代码:
= cl_image_tag(image.asset.filename.to_s, transformation: "scroller", :"data-medium" => image.asset.filename.to_s)
产生这个:
<img src="http://res.cloudinary.com/bucket/image/upload/t_scroller/v1373070863/s1ufy3nygii85ytoeent.jpg" data-medium="s1ufy3nygii85ytoeent.jpg">
我希望能够做到的是输出它(利用t_medium我设置的命名转换):
<img src="http://res.cloudinary.com/bucket/image/upload/t_scroller/v1373070863/s1ufy3nygii85ytoeent.jpg" data-medium="http://res.cloudinary.com/bucket/image/upload/t_medium/v1373070863/s1ufy3nygii85ytoeent.jpg">
目前,cl_image_tag通过使用正确配置的URL生成图像标记,正在进行繁重的工作.这很好,但是我似乎找不到任何关于如何将配置的URL作为没有图像标记的字符串输出的文档(用作data-medium属性).我可以手动配置URL,但我想知道是否有更好的方法？
我使用jquery-fileupload来允许用户将文件上传到外部服务(Cloudinary更具体):
<input type='file' name='file' class='cloudinary-fileupload'
data-url='https://api.cloudinary.com/v1_1/wya/auto/upload' />
<script>
$('.cloudinary-fileupload').fileupload();
</script>
由于它是外部目标,因此浏览器会发起CORS请求.但是,我注意到浏览器会预先设置CORS预检请求. http://www.html5rocks.com/en/tutorials/cors/提供了关于何时触发预检请求以及何时未触发预检请求的非常好的见解.据我所知,我的请求满足了作为CORS简单请求的所有标准(请参阅"CORS请求类型"一节).
该文件上传请求发送到外部服务:
POST /v1_1/wya/image/upload HTTP/1.1
Host: api.cloudinary.com
Connection: keep-alive
Content-Length: 22214
Accept: */*
Origin: http://wya.herokuapp.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarym73rCIa6t8eTNkTa
Referer: http://wya.herokuapp.com/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: sv-SE,sv;q=0.8,en-US;q=0.6,en;q=0.4,de;q=0.2
在文件上载请求之前发送到外部服务的附加预检请求:
OPTIONS /v1_1/wya/image/upload HTTP/1.1
Host: api.cloudinary.com
Connection: keep-alive
Access-Control-Request-Method: POST
Origin: http://wya.herokuapp.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like Gecko) …