Js sdk图片上传文档看懂，能不能举个细一点的例子

[11159]

<img src="../image/demo.jpg">

[wangxiao]

HTML：

  <input id="file" type="file">

JavaScript：

var avFile;
var f = document.querySelector('#file');
f.addEventListener('change', function() {
    avFile = new AV.File('test', f.files[0]).save({
        success: function(data) {
            console.log(data);
        }
    });
});

[11159]

var avFile = new AV.File(name, file); 这个file接收什么样的类型，对象吗？
用img为什么总是不行？img.scr报错，说是不能用string

    var img = document.querySelector('#imgTest');
    console.log(img);
    var post = new AV.Object("Post");
    avFile = new AV.File('test', img);
    post.save({
        content: "每个 JavaScript 程序员必备的 8 个开发工具",
        pubUser: "LeanCloud官方客服",
        photo: avFile
    }, {
        success: function(post) {
        console.log('实例已经成功保存.')
        },
        error: function(post, error) {
        console.log('失败了.')
        }
    });

[wangxiao]

这个 file 当然是 传过来的浏览器 file 对象的一个实例。
如果你是像通过 url 上传，请再看下文档，有两种技术方案。

可以通过 AV.File.withURL()
或者通过 base64 上传

但是对方如果有防盗链功能，就可能会失败。

文档地址 https://leancloud.cn/docs/js_guide.html#文件

[11159]

因为 Node.js 对 IO 的读写经常都是经过 Buffer，通过支持 Buffer，我们的 SDK 也能很好地工作在 Node.js 环境。
+

从0.3.2版本开始，我们还支持保存一个现有存储在其他服务上的 URL 的文件对象：
+

var file = AV.File.withURL('test.jpg', 'https://leancloud.cn/docs/images/permission.png');
file.save();

以上是文档说明，我看到node.js就以为那里是node.js用的，就跳过了。
但用AV.File.withURL() 。依然不行，后台的photo是object类型（自动创建的）。console提示成功。后台图片是空的

    var img = document.querySelector('#imgTest');
    console.log(img.src);
    var post = new AV.Object("Post");
    var avFile = AV.File.withURL('test.jpg', 'https://leancloud.cn/docs/images/permission.png');
    // var avFile = new AV.File('test', img);
    post.save({
        content: "每个 JavaScript 程序员必备的 8 个开发工具",
        pubUser: "LeanCloud官方客服",
        photo: avFile
    }, {
        success: function(post) {
        console.log('实例已经成功保存.')
        },
        error: function(post, error) {
        console.log('失败了.')
        }
    });

[wangxiao]

avFile 没有 save ？

[11159]

不是用 avFile 在 post.save里边保存了吗?
photo: avFile 这个不行吗，大师，不要那么懒，多打几个字再提醒一下

[11159]

    var img = document.querySelector('#imgTest');
    console.log(img.src);
    var post = new AV.Object("Post");
    var avFile = AV.File.withURL('test.jpg', img.src);
    // var avFile = new AV.File('test', img);
    avFile.save();

这样子传上去的是路径，不是图片

[wangxiao]

对，这样保存的是 AV.File 对象，但是 URL 是指向你想要的图片的。
如果要获取图片其他站点的图片上传，浏览器还比较难实现不了（可以通过 Canvas，但是有跨域限制）。

这个不是一个 LeanCloud 的问题。

相当于 LeanCloud 将 AV.File 能做到的方式都列在那了，你需要自己选择一下技术方案。

[11159]

大师的回复我看不懂，我要上传的是图片，不是路径。移动端的。

这是实例压缩包，怎样才能上传呢，我学 LeanCloud 的图片上传学了几天了，晕，再不行直接走人了。

[wangxiao]

看你的路径能猜出你是打算上传本地文件，但是浏览器不支持这样的上传，你需要通过上面帖子中给过你的代码上传，或者如果是本地上传可以使用 HTML5 File 对象，浏览器是有权限限制，如果本地上传通过 input type=file 可以取到，另外通过 base64 也是个方式，或者 file 对象读取本地文件然后传二进制也可以。都有接口，请再参考文档。如果不了解，那就通过 input 上传吧，最简单。

[11159]

是APICloud 移动应用，大师的意思只能两种办法base64和input，ajaj可以做到，APICloud的mcm也能直接上传img标签的图片，为什么这个就不行，能不能做一个适合移动应用的JS SDK呀，或者做APICloud的原生模块也行，最主要的就是LeanCloud云比APICloud云快，才选择的。

[wangxiao]

APICloud、appCan、DCloud、H5 plus 等等之类的技术，都是一种 Hybird 方案，原理是通过 Native 与 Web 通信，甚至是通过 bulid 将 Web 部分组件 Native 化来实现的 Native App 的一种技术。其实这才是他们的本质，而他们的服务端技术，我这里保留我的意见，暂不评论。

首先为什么用一个技术方案，你要综合调研，仔细了解一下。

上传图片输入 URL，这个 URL 也只是一个资源定位符，Hybird 方案中的图片应该是本地的或插件中特定文件路径内的图片，或者原理是先下载到本地，再通过 API 上传。这是 Native App 本身的能力，不是 Web 浏览器所具备的。

LeanCloud 与他们不同，我们重点在于提供后端接口和纯 Native SDK（JavaScript SDK、iOS SDK、Andriod SDK、C++ SDK、Windows Phone SDK 等等）。

所以，回到上传这个问题，LeanCloud 提供了上传接口，这个接口支持多种数据格式，你可以调研，并尝试通过对应的方式调用。如果是 iOS App 那可以通过下载图片，然后再从本地上传也可。但是纯 Web 抓取图片上传的功能我们暂时没有，而且这个功能提供了可能会有被图片商屏蔽、甚至起诉的风险。浏览器的限制我们也是突破不了的，比如浏览器读本地文件需要授权、特定文件等，可以参考 HTML5 File 相关标准文档。

[wangxiao]

再补一刀，使用 APICloud、appCan、DCloud、H5 plus 等等之类的技术，也可以同时使用 LeanCloud 的各种服务。

[11159]

JS SDK只提供2种上传方式，编码和inpu file。而这两都不适合。
原因;1.编码的话，不是URL我使用不了缩略图，(解决方法是，你们能不能在后端将编码转成URL再提交给七牛？)
2.inpu file 用于移动端的话，在选择图片时体验不好，我用原生的再返回本地的url或编码。因为html5的选择图片体验问题实现没有其它解决方式。
所以肯请官方出个编码转成URL的功能。
妈呀。几个月了就围着这个问题转，，一直找不到好方法。谢谢

[Hew]

我也是在移动端用input上传图片，但是一直提示无法解析url，请问你解决了吗？

[11159]

使用ipnut，看2楼的例子

[Hew]

就是用的这个方法，在手机上的浏览器，一直出错，提示URL无法解析。

[11159]

试试pc上正不正常。pc可以的话，手机浏览器一样的

[Hew]

pc上试了，一切正常，但是就是手机上的浏览器就不行，好像是手机安全的问题吧！